I'm developing a Google Chrome Extension which changes its icon depending of your IP localization. I face issues with refresh after an extension's icon change.
The icon is actually changing thanks to this command from my background.js file.
chrome.browserAction.setIcon ( { path: 'france.png' } );
Unfortunately, the setIcon command seems to be asynchronous. Icon change actually appears a few seconds after the change in the code. Is there a way to force chrome to refresh icons ?
Many chrome extensions seem to be able to control this but I couldn't find out how they manage this.
Here are more details :
In order to understand more clearly, I removed all my javascript code from different files, except the setIcon line. Here is Manifest line which declares my javascriptfiles.
"background": { "scripts": [ "jquery.min.js", "popup.js", "background.js"] },
popup.js: Now empty
background.js: Only these two following lines :
console.log ("I'm background script");
chrome.browserAction.setIcon({path: 'france.png'});
After extension reload with the extensions manager, I click on its icon. Chrome make the static html popup to appear and load background.jsfile. As a proof of it, the text immediately appears on the console window.
But I have to clic a few more times on the icon extension to see it changed by chrome.
I should do something wrong somewhere, but actually, as I removed everything, I have no clue where this delay could come from.
To instantly update the icon handle all relevant webNavigation events in the background script:
chrome.webNavigation.onCommitted.addListener(updateIcon);
chrome.webNavigation.onHistoryStateUpdated.addListener(updateIcon);
chrome.webNavigation.onBeforeNavigate.addListener(updateIcon);
function updateIcon(details) {
if (details.frameId != 0) {
return; // only update the icon for main page, not iframe/frame
}
chrome.browserAction.setIcon({
path: {19: "france-19.png", 38: "france-38.png"},
tabId: details.tabId
});
}
Your manifest.json should have webNavigation permission, of course.
Related
Ok So I converted a bookmarklet to a chrome extension and, basically what happened was that I had to click the chrome extension icon to activate the bookmarklet. So my bookmarklet shows an alert whenever a website with the word 'unblocked" and that won't work, because I don't want it to be on click.
chrome.browserAction.onClick.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
ok so how would i make the chrome extension just run in the background without clicking the icon
Your question is ambiguous. From what I understood, you might want a content script which can read/modify the content shown by a page. You can use the matches property to specify URLs on which the content script will run.
I want to create an extension that does the following:
have a pageaction or browseraction (not sure which one is more appropriate).
if the url of the page is found in my database/service then allow the Action to have/show a popup where some information from my service is displayed.
Otherwise make the Action button look disabled and show no popups
I have been trying a background script with a popup. Have not been able to show contents in the popup set to the results from my service. For the communication between the background and the popup I used the advice here: How to communicate between popup.js and background.js in chrome extension? but did not manage to get it worked. and debugging the popup has been almost impossible.
I tried creating an iFrame using content_script in the main page. That did not go well at all. Lots of cross frame exceptions.
I think for what you're doing you should look at page actions. Page actions are greyed out by default but you can choose to show them.
Having a look at How do I make page_action appear for specific pages? you could update it by looping through your list of URLs
function checkForValidUrl(tabId, changeInfo, tab) {
chrome.storage.local.get(['urls'], function(result) {
for (var item in result.urls) {
if (tab.url.indexOf(item) > -1) {
chrome.pageAction.show(tabId);
//set url to the URL you want for the popup
chrome.pageAction.setPopup({tabId: tabId, popup: url})
//or you could create a new window - see https://developer.chrome.com/extensions/windows.html#method-create
}
}
});
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
Edit: Sorry, I realise now that you're actually trying to debug the popup instead. Hopefully this helps for checking the URL though
I'm trying to add a button to the page when it loads from a Chrome Extension. I've managed to get it to execute when visiting a specific page, however I can't seem to be able to change any elements.
This is my listener:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.active) {
// code
}
})
I've tried using both document.getElementById and tab.getElementById but I can't seem to edit the page at all. Any help? Thanks.
You need to use content scripts for any manipulation with DOM on page. These scripts could be specified in manifest file. it's described here
Also it could be done from background script. You will need background script anyway if some communication between your extension and webpage is needed. It's some kind of proxy.
From background script it could be attached this way:
chrome.tabs.executeScript(tabId, {file: 'content-script.js'});
I am writing a Chrome extension that adds a context menu item and performs an action when the user right-clicks a YouTube hyperlink.
My manifest file defines the background script as well as the javascript that is run when a link is clicked. Here are the relevant parts of my manifest.json file:
"background": {
"persistent": false,
"scripts": ["scripts/background.js"]
},
"content_scripts": [
{
"matches": ["*://*.youtube.com/*" , "*://youtube.com/*"],
"js": ["scripts/click.js"]
}
],
As you can see the background page uses the javascript file background.js and the context script uses click.js.
I am trying to debug click.js using the Chrome Developer Tools inspection utility but the problem I am running into is I can't figure out a way to get click.js to show up in the sources panel of the inspector.
If I go to the Chrome extensions page and click "Inspect views: background page" the inspector opens up but the only script shown is background.js.
If I right-click the extensions button (shown in the upper right) and select "Inspect popup" again I don't see click.js, only the javascript files that are loaded from within popup.html.
My question is, how do I debug javascript that is executed after a context menu click in Chrome? Should I "hack" it and force the script to always load click.js by adding it to the background page:
"background": {
"persistent": false,
"scripts": ["scripts/background.js", "scripts/click.js"]
},
If I did this, I could then see the script when inspecting the background page and set breakpoints, etc.
This seems like too much of a hack. There must be a more elegant way to inspect javascript files that aren't associated with the background page or any other html page (such as popup.html).
Is there a way to force the inspect window to load all javascript sources regardless of whether or not they are loaded with the page that is being inspected? Or is the inspection page limited to what is actually loaded, not the full set of scripts?
Thank you,
Clock
I've had a good look, but I can't seem to find and answer to this question (well, one that works for me anyway).
I've made a Chrome extension that should run the code that's in my content script on click of the icon only, but it always runs as soon as the page loads. Is there a way to prevent this from happening? None of the possible strings I can enter for run_at really cater for this.
Here is example code in both scripts:
Content Script:
function runIt() {
console.log('working');
}
runIt();
background.js:
chrome.browserAction.onClicked.addListener(function(activeTab) {
chrome.tabs.executeScript(null, {file: "content.js"});
});
It will log 'working' as soon as the page loads, and for each button click after that. Is there a way to stop it running as soon as the page loads?
Thanks in advance for all contributions.
The browserAction.onClicked code in your background page does exactly what you want. If you want to stop content.js from running as content script on page load, simply don't include it as a content script in your manifest.
Specifically, in your manifest.json file, you have some lines that look something like this:
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content.js"]
}
],
Simply remove those lines, and the script will stop running on page load, while your click listener code will continue working.