I'm making a chrome extension and using page_action instead of browser_action because I need this extension for only one specific url. I'm using declerativeContent for activating the page_action;
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostEquals: 'www.example.com', schemes: ['https'] },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
In normal tabs of chrome, there is no problem. Page_action works exactly the way I want. But in pop-up windows, there is a problem. I mean, there is page that contains links to pop-up pages. When I click to them, pop-up windows open but I can't see the page_actions in the address bar.
What could be the problem?
Unfortunately, Google Chrome extensions doesn't provide page_action icon on the adress bar in pop-up windows. But still, extension works on that window. You should think other ways to make your extension functional.
Related
One one Macbook Pro(box_working) with chrome version 84.0 the below extension works but on another Macbook Pro(box_not_working) with chrome version 85.0 it does not. Note that these extensions are being loaded directly from the two devices(not from the extension store). The iconUrl path used for creating the notification is correct as well.
On both devices, The callback for the chrome.notification.create is invoked and the log message "notification sent" from the callback shows up. However the notification never appears on box_working and on box_not_working it always appears.
On box_not_working, notifications fo get fired from extensions installed from the extension store. It appears to be only the dev mode extensions loaded from the device that do not work.
Below is the manifest.json and the background.js used. The notification is meant to fire each time a tab is updated for the test.
Manifest.json
{
"name": "Test Extension",
"version": "1.0",
"manifest_version": 2,
"background" : {
"scripts" : ["js/background.js"],
"persistent": false
},
"permissions": ["notifications"],
"browser_action": {
"default_icon": "icon.png"
}
}
The background.js is
chrome.tabs.onUpdated.addListener(function() {
console.log("on updated listener");
options = {
title: 'Notification test',
message: 'How great it is!',
iconUrl: '/icon.png',
type: 'basic'
};
chrome.notifications.create('', options, function(notificationId) {
console.log("notification sent");
});
});
The icon.png is at the same level as the 'js' directory.
Did you make sure if the notification is not turned off in these places
1- On Chrome, clicking on the three dots -> settings -> privacy&security -> site settings -> notifications
2- On mac top right corner, there is a hamburger, click and go to the wheel icon on the bottom right corner, make sure the chrome notification is turned on.
I am trying to create a page action chrome extension. It installs fine and I get the icon working when it's a browser action, however not with page action. So how do I debug it when I cannot right-click "inspect popup".
Added the following to the manifest and removed browser action:
"page_action": {
"default_icon": "icons/icon19.png", // optional
"default_title": "Switch", // optional; shown in tooltip
"default_popup": "src/popup.html" // optional
},
Thanks
The difference between a page action and a browser action:
Browser action is always displayed, while a page action is only displayed on some pages where it makes sense.
Therefore, after declaring your page action in the manifest, you have to actually show it in a given tab with chrome.pageAction.show(tabId) (from the background script).
// Most primitive way to show the page action - on every tab update
chrome.tabs.onUpdated.addListener( function(tabId) {
chrome.pageAction.show(tabId);
});
If the icon is shown, you can debug its popup as normally - Inspect Popup will be available.
My Chrome Extension has a popup with a few links, which I would like to be opened in the current tab if it's a New Tab page, or open in a new tab otherwise. So I believe I need to know the active tab's URL. Or is there another way to identify a New Tab?
I'd like to use the "activeTab" permission rather than "tabs" - I want the user to see as few permissions listed as possible.
The only way I've found to identify the tab's URL is by using a background page and
chrome.browserAction.onClicked.addListener(function(tab))
But this is not compatible with having a popup defined in the manifest. I can set the popup page programatically, but I can't see a way to make the popup appear. Is there a way to do that?
When I have default_popup defined in the manifest I use
document.addEventListener('DOMContentLoaded', function ())
to launch the related code, so no reference to the active tab is available. Is there another way to run the code, or to get the active tab?
Thanks.
The activeTab permission allows you to "Get the URL, title, and favicon for that tab via an API that returns a tabs.Tab object". So, to get the current tab URL from the popup you can do:
chrome.tabs.query( {active:true, currentWindow: true}, function(tabs) {
currentUrl = tabs[0].url;
});
I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:
var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);
But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.
The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :
The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...
Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.
Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.
So, as of March 2018 as of now, you still can't do it.
Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.
As mentioned there is no public API for this.
One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.
background.js
browser.runtime.onMessage.addListener((request) => {
if (request.open) {
return new Promise(resolve => {
chrome.browserAction.getPopup({}, (popup) => {
return resolve(popup)
})
})
}
})
content-scipt.js
const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')
b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
evt.preventDefault()
chrome.runtime.sendMessage({ open: true }, (response) => {
i.src = response
p.appendChild(i)
})
})
p.appendChild(b)
This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.
manifest.json
....
"web_accessible_resources": [
"popup.html"
]
....
You could emulate the popup by displaying a fixed html element on the page in the same location the popup would be and style it to look like the popup.
I had the same requirement: When the user clicks on the extension icon a small popup should open. In my case, I was writing an extension which will give updates on selective stocks whenever the icon is clicked. This is how my popup looked.
If you were having the same requirement then please read the answer below.
This is how my manifest.json file looked.
All the heavy lifting was handled by manifest.json file only. There is a section browser_action inside which there is a key called default_popup, just put the name of the HTML file that you want the popup to display.
I wanted my extension to work on all the pages that's why I added the attribute matches under content_scripts. I really didn't need to put the jquery file jquery-3.2.1.js inside the js array but the extension manager was not allowing me to keep that array empty.
Hope this helps, do comment if you have any doubt regarding the answer.
I have built a simple chrome application which has a background page that shows desktop notifications when a new article is available.
If a user clicks on the notifications when a browser window is open, then they are taken to the new article page and everything is right with the world.
If however the browser is closed when the notification is shown, then the href does not open the browser. I have also tried to capture the click and set a window.open, but that isn't working either.
As an aside, it would also be good if I could check to see if an instance of my app is already open and use that window/tab when the notification is clicked, but that's secondary to the first problem.
Any help would be great!
Thanks
Check if chrome window is open. if open the create in new tab else oepn new window.
chrome.windows.getCurrent(function(currentWindow) {
if (currentWindow != null) {
return chrome.tabs.create({
'url': url
});
} else {
return chrome.windows.create({
'url': url,
'focused': true
});
}
});
Have you tried, creating a window then tab using the Chrome API? For example:
linkDOM.addEventListener('click', function() {
chrome.windows.create({url: 'http://someurl.com'});
}, false);
I usually do the above when programmatically opening a link from extension pages.