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.
Related
With this code I want to create an event listener for whenever chrome storage updates.
I want 2 things to happen when the event listener is triggered:
The code will console log the updated values. This part works.
I want the HTML for the extension (the document that opens in the corner when you click the icon) to update and render the data value that is in chrome storage. This is that part I need help with.
chrome.storage.onChanged.addListener(function(changes, namespace) {
//part 1
console.log('New data type is %s. New value is %s',
changes['type'].newValue, changes['data'].newValue)
//part 2
document.getElementById('output').innerHTML =
changes['data'].newValue
});
I realize that calling "document" inside the function doesn't make sense, but I'm unsure how to move forward to get it to render in the extension's HTML.
I tried creating an event listener for when the context menu is accessed (users can update the chrome storage but clicking a button in the context menu) but I couldn't get it to work. Also the event should trigger when chrome storage is updated, not when the context menu is simply accessed.
Right now I get this error:
Error in event handler: TypeError: Cannot set property 'innerHTML' of null
(There is an element with id 'output', so that isn't the problem)
Thanks for your help!
The background script runs in a separate hidden background page. It's not related to the browserAction or pageAction popup page, it doesn't have any of the popup page elements, its DOM is empty except for the auto-generated script tags of the background scripts.
The popup is also a separate page and just like any normal page its environment/DOM exists only when the page is shown. You can't modify it when it's not shown. You can't show it from your code in general case either.
Solution 1
Put that onChanged listener in popup.js script that's loaded in your popup.html (declared as "browser_action": {"default_popup":"popup.html"} in your manifest.json) using the standard <script src="popup.js"></script> tag. It will update the popup page if it's shown, and to display the current values when the popup opens read them with chrome.storage.local.get or chrome.storage.sync.get depending on which storage you're using in your extension.
Solution 2
Use chrome.notifications API to show a small notification at the bottom of the screen, see also the official demo extensions.
Solution 3
Use chrome.browserAction.setBadgeText to display short text like a temperature right under the extension icon. Don't forget to declare at least "browser_action": {} in your manifest.json.
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.
Say I want to create an extension allowing me to close a Chrome tab by clicking a tab twice. So, single click displays the page of the tab, double click closes the tab. That's all.
This means I don't require any browser actions, options, or page actions. What would I need besides a manifest.json and how are the Types, Methods, or events for "chrome.tabs" implemented?
https://developer.chrome.com/extensions/tabs#type-Tab
Thanks in advance.
First of all: you cannot interact with tabs at that level. The actions that the user makes externally, like double clicking on a tab, or right clicking on a tab, are only controlled by Chrome itself: there are no listeners or methods that can control the behavior of Chrome in this way.
By the way, if you want to create an extension that only uses the chrome.tabs API, then all you have to do is to declare the permissions for it in your manifest.json, and also add the "background" field, like this:
...
"permissions": ["tabs"],
"background": {
"scripts": ["background.js"]
},
...
and then create a background.js script that will run in the background page of your extension, without the need of page/browser actions.
After messing around with Chrome Extension I noticed that when you are on the chrome://extensions page a background script initiated in the manifest file will run where as if you are just browsing the internet or on another other page besides the extension page the background script will not run.
Here is what I mean:
In my Manifest file:
"background": {
"scripts": ["jquery-latest.js","background.js"]
},
Now in the background.js file:
$(document).ready(function(){
alert("working");
});
I use a simple alert function to see if this will work and found out that alert("working"); only gets displayed when I am on the chrome://extension directory. If I go to google.com or something of that sort, no cigar.
My question lies in, why does this happen? How do I change it so it does alert no matter what.
The background script should be viewed as "running in the background of the Chrome browser".
Your desired effect (running a script for every page) is actually a task for content scripts.
To learn more, read https://developer.chrome.com/extensions/overview.html#arch.
It is because you are using the background page .. use the event page instead by slightly modifying the manifest.json..
Try adding this:
"background": {
"scripts": ["jquery-latest.js","background.js"],
"persistent": false
},
for more details on event pages check this : https://developer.chrome.com/extensions/event_pages
The effect is produced because whenever you load chrome://extensions it forces the extensions to reload, the same behavior can be reproduced using CTRL+R. So every time, the background page got a fresh reload, which doesn't happen in case of other pages.
The background script is a script running in the background to handle majority of chrome events that content scripts cannot. Content scripts are purely the content of the each page. Both cannot speak to each other, however, you can give the scripts listeners (e.g. chrome.browserAction.addListener(myFunction) plays the function when the button in the top right of your screen for the extension is clicked) order to find out whether a button has been pressed or even send a message from the background script into the page's console.
https://youtu.be/ew9ut7ixIlI
This video was a great introduction for me about background scripts, however, the part where he begins to talk about the listeners and such is 6:30.
I want that a content script executes only after user clicks on the toolbar button for that extension (and not before).. I want some forms in child iframes to be fully loaded, after that the user should click on the button, and now the content script will send contents of the child iframes in message to the background page of the extension.
Is it possible to do this? How to implement it?
Use Programmatic Injection. http://code.google.com/chrome/extensions/content_scripts.html#pi
/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content_script.js"});
});
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
this will execute a content script everytime the extension is clicked.