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