JQuery和Chrome扩展

我想开发一个测试Chrome扩展，以查看JQuery如何与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的扩展插件的工作示例，那太棒了！

来源

2013-10-18 user2200175

这是什么问题？ – citykid

究竟是什么问题？它应该工作。看看这个网站：http://carl-topham.com/theblog/post/creating-chrome-extension-uses-jquery-manipulate-dom-page/ – yarl

当我加载插件，并点击它，它只显示一个小小的弹出框，在右下角有一个小灰盒子。 – user2200175

你一直没有把不应该混在一起的东西混合起来。

有一件事你已经做错了：
既然你不想要的弹出浏览器上的动作按钮点击时才会出现，你不应该指定一个“默认弹出”：

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

随着中说，要解决这个问题的最好办法（IMO）如下：

有你的背景页（或更好，但event-page）监听chrome.browserAction.onClicked事件。
（请注意，为了使事件被触发，没有默认弹出必须设置。）
发生这种情况时，使用programmatic injection注入jquery.min.js和content.js到活动标签的页面，使用chrome.tabs.executeScript。
为了使上述步骤是可能的，你还必须声明的必要permissions，即"tabs"和URL应该是您的分机访问的页面的match-patterns（如"http://*/*"和"https://*/*"有使用http和https方案访问所有页面）。

我也建议，为了与现有的领域和可能的值来熟悉采取了很好看的manifest specification。

最后，一些演示源代码，让你开始（我知道所有的信息同时可以压倒一切）：

扩展文件夹结构：

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

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

不要犹豫，回来，你应该有进一步的问题/问题:)

为了完整起见...
...让我刚刚提到，THRE是可能的其他方法，如sush：

使用网页的行为，而不是浏览器的作用。
向您的内容脚本注入每个页面，并通过从背景页面到内容脚本的消息传递来触发突出显示。

来源

2013-10-20 13:04:20 gkalpak

JQuery和Chrome扩展

回答

相关问题