In general, you cannot change the response body of a HTTP request using the standard Chrome extension APIs. This feature is being requested at 104058: WebRequest API: allow extension to edit response body. Star the issue to get notified of updates. If you want to edit the response body for a known XMLHttpRequest, inject code … Read more
As it’s already mentioned, for background script, it’s good idea to use background.page and use <script type=”module”> to kick your JavaScript. The problem is content script, and injecting <script> tag with type attribute can be a solution. Another approach than injecting script tag is to use dynamic import function. By this approach, you don’t need … Read more
In your background page you should call chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ chrome.tabs.sendMessage(tabs[0].id, {action: “open_dialog_box”}, function(response) {}); }); instead of using chrome.extension.sendMessage as you currently do. The chrome.tabs variant sends messages to content scripts, whereas the chrome.extension function sends messages to all other extension components.
I have found the answer to this, at least as of Chrome v14. While in the Elements section, just click on the “filename:linenumber” link next to the CSS rules. The CSS file that shows up will contain all of the modifications. This place exactly:
From a background script you can listen to the chrome.tabs.onUpdated event and check the property changeInfo.status on the callback. It can be loading or complete. If it is complete, do the action. Example: chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) { if (changeInfo.status == ‘complete’) { // do your things } }) Because this will probably trigger … Read more
Chrome has i18n support that provides the ability to reference your extension in your CSS. I keep my images in an image folder in the extension, so reference assets in the CSS like so: background-image:url(‘chrome-extension://__MSG_@@extension_id__/images/main.png’);
You can also relax your CSP for styles by adding style-src ‘self’ ‘unsafe-inline’; “content_security_policy”: “default-src ‘self’ style-src ‘self’ ‘unsafe-inline’;” This will allow you to keep using inline style in your extension. Important note As others have pointed out, this is not recommended, and you should put all your CSS in a dedicated file. See the … Read more
Although you are definitely in the right direction (and actually pretty close to the end), there are several (imo) bad practises in your code (e.g. injecting a whole library (jquery) for such a trivial task, declaring unnecessary permissions, making superflous calls to API methods etc). I did not test your code myself, but from a … Read more
In newer versions of Chrome (since Chrome 22), you can use the chrome.runtime.onInstalled event, which is much cleaner. Example: // Check whether new version is installed chrome.runtime.onInstalled.addListener(function(details){ if(details.reason == “install”){ console.log(“This is a first install!”); }else if(details.reason == “update”){ var thisVersion = chrome.runtime.getManifest().version; console.log(“Updated from ” + details.previousVersion + ” to ” + thisVersion + … Read more
Short answer: Use the change event. Here’s a couple of practical examples. Since I misread the question, I’ll include jQuery examples along with plain JavaScript. You’re not gaining much, if anything, by using jQuery though. Single checkbox Using querySelector. var checkbox = document.querySelector(“input[name=checkbox]”); checkbox.addEventListener(‘change’, function() { if (this.checked) { console.log(“Checkbox is checked..”); } else { … Read more