We Keep Coding

How to not make a chrome extension onclick

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 can't access the web page DOM from a Chrome Extension pop up

I am struggling to access the DOM of the web page for my Chrome Extension.
In one extension I made, my extension parses the DOM from the content.js file without issue. This happens as the page loads. The user does not need to interact/open the extension at all, it just needs to be running in the backgorund.
Now I'm trying to trigger this from a button. This means the user will click the extension icon in the browser, and the popup.html will show some HTML (including the button).
This is where the problem lies for me. When I now try access the DOM (via click event of the button), it shows the popup.html's DOM, not the web page (The active tab).
So, a quick look through the docs (which I'm open to admit I struggle with) show that it could be a permissions issue. In my manifest.json file, I added
"permissions": [
"activeTab"
],
This didn't help :(
So in this new extension, I'm not using the background.js nor content.js .. I guess this is the problem, as the javascript I'm calling is embeded in the HTML pop up! This makes sense to me (as to the behaviour I'm getting).
How do I access the DOM of the active tab from the HTML pop up

The only way of accessing a page's DOM is by using a content script. Since you've set the activeTab permission you can use chrome.tabs.executeScript to inject a content script into the active tab by omitting the first parameter (the tabId).
Here is an example:
chrome.tabs.executeScript({ file: "content.js" });

I have had this same issue, I click on the button to open an popup, then how do I access the contents of the popup. Yes, you will need to use content scripts, but a trick I done to accomplish this, was when the popup is open, use window.name and get the name of that window. Then you can reference that popup window by var test = window.name('', 'name of that window'). Then you can reference the dom elements of the popup from test. Worked for me, let me know if I need to include some code to better explain.

extension programming: where should the logic and dynamic behavior exist? background js, content_script, popup js

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

my chrome extension will not load untill i reload/refresh the same youtube video page again

i am creating a youtube chrome extension and try to load extension from background page automatically when any youtube video or channel page open but extension will not load untill i refresh same page again. i am using chrome.tabs.onUpdated.addListener to fire my script. i am already given tab permission on menifest.json file here is my background.js file is as
function checkForValidUrl(tabId, change, tab)
{
if (change.status == 'loading' && change) {
//check for url is valid or not...and then load html through javascript
}
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
thanks in advance.......

Detecting hash changes should work:
WindowEventHandlers.onhashchange
I use it for checking to see if an email was opened in Gmail. Gmail also changes the URL similar to how Youtube does.
Example using your function name:
window.addEventListener("hashchange", checkForValidUrl, true);

Refreshing an icon change for chrome extension

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.