调试Chrome扩展程序的内容脚本 [英] Debugging Content Scripts for Chrome Extension

问题描述

一般问题

您好！我正在深入Chrome浏览器扩展的世界，并且使整个工作流程出现了一些问题。似乎Google最近已经切换到大量提倡事件页面，而不是将所有内容都保留在background.js和background.html中。我参与这一切意味着我们应该把大部分的扩展逻辑都转移到内容脚本中。

在 Google的活动页面底稿，它们的manifest.json文件中列出了内容脚本。但是在事件页面示例扩展中，它是通过background.js中的代码块引入的： chrome.tabs.executeScript（tab.id，{file：content.js}，function（） {}）;

以一种方式相比，有什么好处？

我的代码

我将以编程方式注入内容脚本，如Google的示例。

manifest.json

  {
manifest_version：2，
name ：test，
description：我们得到这个吸盘工作，
version：0.0.0.1，
permissions：[
 
*：// * / *
]，
background：{
scripts：[background.js]，
 持续：false 
}，
browser_action：{
default_icon：icon.png
} 
} 
  

background.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（'你在'world.js的世界'）; 
 var ans = {}; 
 
 ans.createSidebar = function（）{
 
 return {
 init：function（）{
 alert（why hello there）; 
} 
} 
}（）; 
 
 ans.createSidebar.init（）; 
  

我可以获得前3个$ code> console.log 语句显示在后台页面的调试器中。我也可以从content.js获取警报，显示在任何网站上。但是我不能从content.js看到 console.log ，也不能从content.js中查看任何JS。我已经尝试查看背景页面调试器的源选项卡的内容脚本部分。 SO的其他一些帖子已经建议添加 debugger; 语句以使其显示，但我没有任何运气。我看到的最接近的解决方案是这篇文章，但是通过在清单中列出内容脚本来完成。

任何帮助将不胜感激。谢谢！

解决方案

内容脚本的console.log消息显示在网页的控制台中，而不是背景页面的检查器。 p>

添加调试器; 可以打开开发工具（用于注入内容脚本的网页）。 / p>

因此，在这种情况下，您应该首先激活开发工具（网页），然后点击浏览器操作图标，一切都应该正常运行。

General Questions

Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script.

In Google's Event Page primer, they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

What are the advantages of doing it one way over the other?

My Code

I'm going forward with the programatic way of injecting the content script, like Google's example.

manifest.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"
    }
}

background.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();

I am able to get the first 3 console.log statements to show up in the background page's debugger. I'm also able to get the alert from content.js to show up in any website. But I'm not able to see the console.log from content.js, nor am I able to view any of the JS from content.js. I've tried looking in the "content scripts" section of the background page debugger's Sources tab. A few other posts on SO have suggested adding debugger; statements to get it to show, but I'm not having any luck with anything. The closest solution I've seen is this post, but is done by listing the content script in the manifest.

Any help would be appreciated. Thanks!

解决方案

Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.

Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.

Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.

这篇关于调试Chrome扩展程序的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！