JQuery和Chrome擴展

Question

我正在嘗試開發測試chrome擴展，以了解JQuery如何使用chrome擴展。 從提供的代碼我認為它應該將彈出窗口的背景更改為黃色。

我嘗試使用內容腳本並使用背景加載jquery.js。 當我通過后台腳本命令加載它時，它顯示已加載jquery.js。

這是我的文件：

的manifest.json

    {
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My first Chrome extension.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "js": ["jquery.js", "content.js"]
    }
  ]
}

popup.html

    <html>
  <head>
    <script src='jquery.js'></script>
    <script src='content.js'></script>
  </head>
</html>

content.js

$('a').css({'background-color': 'yellow'});

我的擴展文件夾中也有jquery.js。 如果有人要么給我一些其他東西來試圖讓這個工作，或者可以向我展示一個鏈接jquery的chrome擴展的一個非常好的工作示例，那就太棒了！

Answer 1

你一直缺乏混合的東西，不應該在一起。

你做錯了一件事：
由於您不希望在單擊瀏覽器操作按鈕時顯示彈出窗口，因此不應指定“default-popup”：

...
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"   // <-- this line should go away
},
...

話雖如此，解決問題的最佳方式（imo）如下：

讓您的背景頁面（或更好的事件頁面 ）監聽chrome.browserAction.onClicked事件。
（請注意，為了觸發事件，不能設置默認彈出窗口。）
發生這種情況時，使用編程注入將jquery.min.js和content.js注入活動選項卡的頁面，使用chrome.tabs.executeScript 。
為了使上述步驟成為可能，您還必須聲明必要的權限，即"tabs"和擴展程序應該可訪問的頁面的URL 匹配模式 （例如"http://*/*"和"https://*/*"可以訪問具有http和https方案的所有頁面。

我還建議，仔細查看清單規范 ，以便熟悉可用字段和可能的值。

最后，一些演示源代碼可以幫助您入門（我立刻知道所有這些信息可能會讓您感到壓力）：

擴展文件夾結構：

       _______________LinkHighlighter_______________
      |                      |                      |
manifest.json               img                     js
                             |                      |__background.js
                        icon<XX>.png(*)             |__content.js
                                                    |__jquery.min.js
(*): <XX> = 16, 19, 38, 48, 128

manifest.json的：

{
    "manifest_version": 2,

    "name": "Link Highlighter",
    "version": "1.0",
    "description": "...",
    "icons": {
         "16": "img/icon16.png",
         "48": "img/icon48.png",
        "128": "img/icon128.png"
    },

    "browser_action": {
        "default_title": "Link Highlighter",
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        }
    },
    "background": {
        "persistent": false,
        "scripts": ["js/background.js"]
    },

    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

background.js：

// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
    // ...inject 'jquery.min.js' and...
    chrome.tabs.executeScript(tab.id, {
        file: "js/jquery.min.js",
        allFrames: true,
        runAt: "document_idle"
    });
    // ...inject 'content.js' into the active tab's page
    chrome.tabs.executeScript(tab.id, {
        file: "js/content.js",
        allFrames: true,
        runAt: "document_idle"
    });
});

content.js：

$("a").css({ "background-color": "yellow" });

如果您有其他問題/問題，請不要猶豫回來:)

為了完整起見......
......我只想提一下其他方法是否可行，如下：

使用頁面操作而不是瀏覽器操作。
使用內容腳本注入每個頁面，並通過從后台頁面到內容腳本的消息傳遞來觸發突出顯示。

JQuery和Chrome擴展

問題描述

1 個解決方案

解決方案1
11 2013-10-20 13:04:20

JQuery和Chrome擴展

問題描述

1 個解決方案

解決方案1 11 2013-10-20 13:04:20

解決方案1
11 2013-10-20 13:04:20