Chrome扩展程序开发:使用jQuery修改DOM

[英]Chrome Extension Dev: Modifying the DOM using jQuery


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!

好。所以我已经阅读了内容脚本等等,包括我将在下面添加的其他几篇SO文章,但这仍然无效!

My _manifest.json_:

我的_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_:

我的_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_:

我的_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.

现在,我只是想修改标签正文的背景颜色。我添加了单击侦听器来运行我的background.html文件,但它不起作用。在调试和执行executeScript事件时,我在background.html文件中的脚本调用上打破了断点,但是我的content.js文件断点没有被命中。我认为在manifest.json文件中的“content_scripts”下面有content.js文件已经足够了,但是如果我删除了我的background.html文件就没有任何反应。

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.

任何人都可以帮助我以任何方式修改选项卡的内容吗?!感觉我错过了一些东西,因为我觉得我比这更难。如果有一种比我想做的更容易的方式,我愿意接受任何建议/最佳实践。

SO Researched Articles

2 个解决方案

#1


26  

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.

内容脚本是javascript代码片段,它们被注入到用户访问的实际页面中,并且可以访问和修改父页面的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:

从后台页面,并通过清单注入jquery作为内容脚本:

"content_scripts": [ {
        "all_frames": true,
        "js": [ "jquery.min.js" ],
        "matches": [ "http://*/*", "https://*/*" ] 
} ]

or with chrome.tabs.executeScript:

或者使用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"});
    });
});

#2


1  

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".

content.js正在尝试使用jQuery,但您还没有将jQuery与内容脚本一起注入选项卡。控制台中的错误是“未捕获的ReferenceError:$未定义”。

There are two options you could use to inject jQuery:

注入jQuery有两种选择:

1) Specify in manifest.json to automatically inject jQuery and your content script:

1)在manifest.json中指定自动注入jQuery和你的内容脚本:

"js": [ "jquery.min.js", "content.js" ],

or,

要么,

2) Inject jQuery via background.html:

2)通过background.html注入jQuery:

chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
    chrome.tabs.executeScript(null, {file:"content.js"});
});

Then, pressing your browser action button will work.

然后,按下浏览器操作按钮将起作用。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/11/05/6922a790122dfb4e613a1eb88ce0c906.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com