调试 Chrome 扩展的内容脚本

一般问题

有人吗！我正在深入研究 Chrome 扩展的世界，并且在整个工作流程中遇到了一些问题。Google 最近似乎转而大力提倡活动页面(Event Pages) ，而不是把所有内容都保存在 backound.js 和 background. html 中。我认为这意味着我们应该将大部分的扩展逻辑移交给内容脚本。

在 谷歌活动页面入门中，他们有列在 Manif.json 文件中的内容脚本。但是在事件页面示例扩展中，它是通过 backound.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });中的这个代码块引入的

这样做的好处是什么？

我的准则

我将继续使用注入内容脚本的编程方式，就像谷歌的例子一样。

宣言 Json

{
"manifest_version": 2,
"name": "Test",
"description": "Let's get this sucker working",
"version": "0.0.0.1",
"permissions": [
"tabs",
"*://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}

背景 Js

chrome.browserAction.onClicked.addListener(function() {
console.log("alert from background.js");
chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
console.log("jquery Loaded");
});
chrome.tabs.executeScript({file: "content.js"}, function() {
console.log("content loaded");
});
});

Content js

console.log('you\'r in the world of content.js');
var ans = {};


ans.createSidebar = function() {


return {
init: function(){
alert("why hello there");
}
}
}();


ans.createSidebar.init();

我能够得到前3个 console.log语句显示在后台页面的调试器中。我还可以从 content.js 获得提醒，以显示在任何网站上。但是我不能从 content.JS 看到 console.log，也不能从 content.JS 看到任何 JS。我试过在后台页面调试器的 Source 选项卡的“内容脚本”部分进行查找。其他一些关于 SO 的帖子建议添加 debugger;语句来显示它，但是我在任何方面都没有任何运气。我见过的最接近的解决方案是 这篇文章，但是是通过在清单中列出内容脚本来完成的。

如果你能帮忙，我会很感激的，谢谢！