Skip to content

Instantly share code, notes, and snippets.

@ahliang85
Last active May 1, 2023 21:51
Show Gist options
  • Save ahliang85/4372c5030fc2175d1ba2 to your computer and use it in GitHub Desktop.
Save ahliang85/4372c5030fc2175d1ba2 to your computer and use it in GitHub Desktop.
Chrome Extension - Modify DOM
Background page is kind of like you own mini server - it is a completely isolated page that has nothing to do with pages a user visits. It is used for controlling the rest of extension components as it is always running in background.
Content scripts are pieces of javascript code that are getting injected into actual pages a user visits and can access and modify parent page's DOM.
So to get your extension working you need to remove
<script src="jquery.min.js"></script>
<script src="content.js"></script>
from background page, and inject jquery as a content script either through manifest:
"content_scripts": [ {
"all_frames": true,
"js": [ "jquery.min.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ]
or with chrome.tabs.executeScript:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment