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

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

Using html dom in google chrome extension
在谷歌浏览器扩展程序中使用html dom
Chrome extension dom traversal
Chrome扩展程序dom遍历
Google chrome extension accessing the dom
访问dom的Google Chrome扩展程序
Chrome extension grab dom content for parsing
Chrome扩展程序可以抓取dom内容进行解析

2 个解决方案

#1

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"});
    });
});

SO Researched Articles

2 个解决方案

#1

更多相关文章

随机推荐