How to inject CSS using content script file in Chrome extension?

You could add to the manifest’s permissions field; See web_accessible_resources. So you would add this to the manifest: , “web_accessible_resources”: [ “fix.css” ] See also “Programmatic injection”. and insertCSS(). For most applications, forget all that createElement code and just add the CSS file to the manifest: “content_scripts”: [ { “matches”: [“http://www.google.com/*”], “css”: [“fix.css”], “js”: [“script.js”] … Read more

Access variables and functions defined in page context using a content script

Underlying cause: Content scripts are executed in an “isolated world” environment. Solution: Inject the code into the page using DOM – that code will be able to access functions/variables of the page context (“main world”) or expose functions/variables to the page context (in your case it’s the state() method). Note in case communication with the … Read more

Chrome extension: accessing localStorage in content script

Update 2016: Google Chrome released the storage API: https://developer.chrome.com/docs/extensions/reference/storage/ It is pretty easy to use like the other Chrome APIs and you can use it from any page context within Chrome. // Save it using the Chrome extension storage API. chrome.storage.sync.set({‘foo’: ‘hello’, ‘bar’: ‘hi’}, function() { console.log(‘Settings saved’); }); // Read it using the storage … Read more

Chrome extension is not loading on browser navigation at YouTube

YouTube has started a trial with pushState-based navigation. In general, such navigations can only be detected within content scripts by injecting code that intercept calls to history.replaceState / history.pushState (or by using the chrome.webNavigation.onHistoryStateUpdated event in the background page). The remainder of this answer is specific to YouTube. YouTube shows a (red) progress bar on … Read more

Chrome extension code vs Content scripts vs Injected scripts

JavaScript code in Chrome extensions can be divided in the following groups: Extension code – Full access to all permitted chrome.* APIs. This includes the background page, and all pages which have direct access to it via chrome.extension.getBackgroundPage(), such as the browser pop-ups. Content scripts (via the manifest file or chrome.tabs.executeScript) – Partial access to … Read more

Chrome extension content script re-injection after upgrade or install

There’s a way to allow a content script heavy extension to continue functioning after an upgrade, and to make it work immediately upon installation. Install/upgrade The install method is to simply iterate through all tabs in all windows, and inject some scripts programmatically into tabs with matching URLs. Obviously, you have to do it in … Read more