Menu
OK. So I've read up on content scripting and the like, including several other SO articles that I'll add below, but this still isn't working!
My _manifest.json_:
{
"name": "name",
"version": "1.0",
"description": "desc",
"browser_action": { "default_icon": "icon.png" },
"permissions": [ "tabs", "http://*/*" ],
"background_page": "background.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ]
}
My _background.html_:
<!doctype html>
<html>
<head>
<title>Background Page</title>
<script src="jquery.min.js"></script>
<script src="content.js"></script>
</head>
<body>
<script>
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.tabs.executeScript(null, {file:"content.js"});
});
</script>
</body>
</html>
My _content.js_:
$('body').prepend('<h1>Testing!</h1>');
$('body').css('background', '#f00 !important');
For now, I'm just trying to modify the background color of the body of a tab. I've added the click listener to run my background.html file, but it doesn't work. I've breakpointed on the script call in the background.html file when debugging and the executeScript event is hit, but my content.js file breakpoint doesn't get hit. I thought having the content.js file under the "content_scripts" in my manifest.json file was enough, but if I remove my background.html file nothing happens.
Can anyone help me modify the content of a tab in any way?! It feels like I'm missing something, because I feel like I'm making this harder than it is. If there is an easier way than what I'm trying to do, I'm open to any suggestions/best practices.
960
Just put the DOM-manipulation logic in a content script and send the keywords to it (instead of sending the HTML, filtering it in the background or popup page and send it back to the content script).
First, download a version of jQuery from the jQuery CDN and put it in your extension's folder, and add the name of the minified version of jquery. To load it, add it to manifest.
Projects In JavaScript & JQueryjQuery provides a number of methods to manipulate DOM in efficient way. You do not need to write big and complex code to set or get the content of any HTML element.
Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser. jQuery has to be converted into JavaScript to make it run in a browser. All these can be done in JavaScript but we may have to write many lines of code.
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"});
});
});
content.js is trying to use jQuery, yet you haven't injected jQuery to the tab along with your content script. The error in the console is "Uncaught ReferenceError: $ is not defined".
There are two options you could use to inject jQuery:
1) Specify in manifest.json to automatically inject jQuery and your content script:
"js": [ "jquery.min.js", "content.js" ],
or,
2) Inject jQuery via background.html:
chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});
Then, pressing your browser action button will work.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
