Fatal编程技术网

Javascript JQuery和Chrome扩展

javascript jquery html google-chrome google-chrome-extension

Javascript JQuery和Chrome扩展,javascript,jquery,html,google-chrome,google-chrome-extension,Javascript,Jquery,Html,Google Chrome,Google Chrome Extension,我正在尝试开发一个测试chrome扩展，以了解JQuery如何与chrome扩展一起工作。根据提供的代码，我认为应该将弹出窗口的背景更改为黄色 我尝试过使用内容脚本和后台加载jquery.js。当我通过backgroundscripts命令加载它时，它显示jquery.js已加载 这是我的档案： manifest.json { "name": "Hello World!", "version": "1.0", "manifest_version": 2, "descrip

我正在尝试开发一个测试chrome扩展，以了解JQuery如何与chrome扩展一起工作。根据提供的代码，我认为应该将弹出窗口的背景更改为黄色

我尝试过使用内容脚本和后台加载jquery.js。当我通过backgroundscripts命令加载它时，它显示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>
我的扩展文件夹中也有jquery.js。如果有人能给我一些别的东西来让它工作，或者能给我展示一个链接jquery的chrome扩展的非常好的工作示例，那就太好了

你一直没有把不该放在一起的东西混在一起

有一件事你做错了：
由于您不希望在单击浏览器操作按钮时出现弹出窗口，因此不应指定“默认弹出窗口”：

manifest.json:

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

{
    "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://*/*"
    ]
}

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

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

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

{
    "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://*/*"
    ]
}

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

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

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

{
    "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://*/*"
    ]
}

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

$("a").css({ "background-color": "yellow" });
如果您还有其他问题，请随时回来：）

为了完整性…
…让我只提一下，还有其他可能的方法，如：

  • 使用页面操作而不是浏览器操作

  • 将内容脚本注入每个页面，并通过从后台页面传递到内容脚本的消息触发高亮显示

    • 没错，有什么问题吗？它应该会起作用。看看这个网站：当我加载插件并点击它时，它只显示一个小的弹出框，右下角和右下角有一个灰色的小框。我尝试了这个链接，但我仍然无法让它工作。我更新了manifest_版本2，在文件夹中获得了jQuery 1.10.2分钟，当我点击插件时，什么都没有发生。我还将background_页面更新为“background”：{“page”：“background.html”}您把事情弄混了一点。你想达到什么目的？使“*”上每个
    元素的背景自动变为黄色？或者有一个按钮，当点击该按钮时，活动选项卡页面的每个
    元素的背景都会变成黄色？@user2200175敲打，敲打！您是否尝试过我下面建议的解决方案？你让它起作用了吗？