一般问题
大家好!我正在深入研究Chrome扩展的世界,在降低整个工作流程方面遇到了一些问题。谷歌似乎最近开始大力提倡事件页面,而不是将所有内容都保存在background.js和background.html中。我认为这意味着我们应该将大部分扩展逻辑传递给内容脚本。
在Google's Event Page primer中,他们在manifest.json文件中列出了内容脚本,但在他们的事件页面示例扩展中,它是通过background.js中的代码块引入的:第一个月
这样做比用另一种方法有什么好处?
我的代码
我将继续使用注入内容脚本的编程方式,就像Google的例子一样。
清单. 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");
});
});
内容. 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。我曾尝试在后台页面调试器的Sources选项卡的"content scripts"部分中查找。SO上的其他一些帖子建议添加debugger;
语句来显示它,但我没有任何运气。我见过的最接近的解决方案是this post,但它是通过在清单中列出内容脚本来完成的。
任何帮助都将不胜感激。谢谢!
3条答案
按热度按时间cbeh67ev1#
内容脚本的console.log消息显示在网页的控制台中,而不是背景页的检查器中。
添加
debugger;
在打开开发工具(用于注入内容脚本的网页)的情况下有效。因此,在这种情况下,您应该先激活开发人员工具(网页),然后再单击浏览器操作图标,一切都应该正常工作。
wztqucjr2#
我尝试使用
debugger
方法,但是效果不好,因为项目使用require.js
来捆绑javascript文件。如果您还在使用
require.js
进行chrome扩展开发,您可以尝试向代码库中添加类似this的内容,并将eval(xhr.responseText)
更改为eval(xhr.responseText + "\n//@ sourceURL=" + url);
。然后你可以在你的开发工具中看到源文件(但不是背景HTML窗口)
gev0vcfq3#
清单版本3
您可以将
console.log
语句添加到内容脚本中。这是调试应用程序的最佳方法之一。
假设您想从内容脚本访问一个DOM节点。
如果节点存在,则为
Element instance
,否则为null
如果您可以在“元素”(Elements)选项卡中看到该节点,但无法通过内容脚本访问它,则可能是在您访问它时尚未加载该节点。
按照此answer解决此问题。