Google Chrome 上下文菜单：如何使用它？如何或如何查看 javascript 控制台？

Question

我正在尝试学习 Chrome 扩展。我的问题是我无法使用上下文菜单。上下文菜单中没有显示任何内容。我如何查看 JavaScript 控制台？我什至在那里什么也看不见。

JavaScript 代码：

var arr_context = ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"];
for(i=0; i<arr_context.length; i++){
    var title = arr_context[i];
    var menu1 = chrome.contextMenus.create({"type":"normal", "title":"Menu " + title, "contexts":arr_context, "onclick":callBack });
}

function callBack(info, tab){ console.log(info.menuItemId + "; URL: " + tab.url); }
/////////// NOTHING CONSOLE LOG ISSUE ///////////////////

清单：

{
    "name": "First Extension",
    "version": "1.0",
    "description": "The first extensione tha I made",
    "permission":["contextMenus"],
    "background_page": "background_page.html",
    "browser_action":{
                        "name": "My First Extension!",
                        "default_icon": "Chrome_icon32bn.png",
                        /* "default_popup": "popup.html", */
                        "default_title": "My First Extension!"
    },
    "icons": {
                "16": "Chrome_icon19color.png",
                "48": "Chrome_icon32color.png",
                "128": "Chrome_icon.png"
    }
}

---

部分解决：文件 manifest.json 中存在错误。我写的是“许可”而不是“权限”。

但第二个问题仍然存在。为什么我没有看到任何 console.log 问题？

Answer 1

为了回答为什么您的 console.log 不显示，我遇到了类似的问题（而且我今天才刚刚开始 Chrome 扩展开发，所以这并不奇怪！），对我来说，这是通过转到扩展页面，然后单击我的扩展下列出的链接“_ generated_background_page.html”来解决的。

由于我没有制作自己的后台 HTML 页面，因此由 Chrome 自动生成一个。
您必须检查此页面才能看到控制台日志。

Answer 2

为了回答控制台问题，您需要右键单击浏览器操作并选择“检查弹出窗口”以查看浏览器操作的控制台输出。

Answer 3

以下内容对我有用，使用您的清单，将其精简为仅包含此脚本的弹出页面：

chrome.contextMenus.create({
    "type":"normal", 
    "title":"Menu ", 
    "contexts":["all", "page", "frame", "selection", "link", "editable", "image","video", "audio"], 
    "onclick": function (info, tab) { 
        console.log(info);
        console.log(tab);
    } 
});

单击“菜单”上下文链接后，我在控制台中看到两个对象（用于检查弹出窗口的开发工具窗口）。

Answer 4

在 Windows 上，按 Shift + Ctrl + J 或 Shift + Ctrl + < kbd>I 并在弹出面板上选择“控制台”选项卡。

在 Mac 上，按 Command + Alt + I 或 Command + Alt + < kbd>J 并在弹出面板上选择“控制台”选项卡。

Answer 5

几乎所有 Chrome 扩展 API 都会默默地失败。
我认为您需要多阅读一点文档：

https:// /developer.chrome.com/docs/extensions/reference/contextMenus/#method-create

我认为您至少还需要提供

• type
• contexts
• onclick
• 和最后但并非最不重要的callback（可选函数）

它在浏览器中创建项目时调用。如果创建项目时出现任何问题，详细信息将在 chrome.extension.lastError 中提供。