Chrome 使 ContextMenu 仅加载特定页面的扩展问题

Question

我从 Google 中的 contextMenu 示例开始。它使用适用于所有页面的背景页面创建上下文菜单。

我正在寻找一种专门为页面创建上下文菜单的方法。我尝试定位的示例页面是任何 Reddit 页面。

我的manifest.json：

{
  "name": "Context Menus Sample",
  "description": "Shows some of the features of the Context Menus API",
  "version": "0.6",
  "permissions": ["contextMenus"],

  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://www.reddit.com/*"],
      "js": ["sample.js"]
    }
  ]
}

sample.js 与 Google 示例提供的 from the original contextMenu example project 相同。它最初是一个背景页面脚本，我已将其移至内容脚本部分，以便它仅针对指定的 (Reddit) URL.

加载

来自 sample.js 的示例代码：

var checkbox1 = chrome.contextMenus.create(
  {"title": "Checkbox1", "type": "checkbox", "onclick": checkboxOnClick}
);

所以我的困惑在于为什么在 reddit.com 时上下文菜单不显示。我的印象是 sample.js 在 url 匹配时触发。

Answer 1

你can't use (most) of the chrome.* APIs from a content script。您的 sample.js 运行，但 API 调用失败。

相反，您应该将其移回后台脚本，并阅读 chrome.contextMenus.create() 上的文档。

具体可以通过documentUrlPatterns参数来限制上下文菜单出现的位置：

var checkbox1 = chrome.contextMenus.create({
    "title": "Checkbox1",
    "type": "checkbox",
    "onclick": checkboxOnClick,
    "documentUrlPatterns": ["*://*.reddit.com/*"]
});

Answer 2

更新

我回到原来的 manifest.json，它只包含上下文菜单：

{
  "name": "Context Menus Sample",
  "description": "Shows some of the features of the Context Menus API",
  "version": "0.6",
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["sample.js"]
  },
  "manifest_version": 2
}

我继续更改创建第一个菜单项的 sample.js 行（请注意，这都是学习经验）：

来自：

for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Test '" + context + "' menu item";
  var id = chrome.contextMenus.create({"title": title, "contexts":[context],"onclick": genericOnClick});
  console.log("'" + context + "' item:" + id);
}

对此（仅更改 var id 部分：

for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "Test '" + context + "' menu item";
  var id = chrome.contextMenus.create({
    "title": title,
    "contexts": [context],
    "onclick": genericOnClick,
    "documentUrlPatterns": ["*://*.reddit.com/*"]
  });
  console.log("'" + context + "' item:" + id);
}

结论

以上更改现在使第一个菜单项只有在您位于 reddit 页面中时才能访问。因此，从这一点来看，找出我的扩展的其余部分并不难。谢谢你们的帮助。

我为我糟糕的格式向编辑们道歉。我是这个站点的新手，是扩展程序的新手，不幸的是，我已经超过了正常的睡眠时间。我会尽量不再让你受那种愚蠢的影响。

Chrome 使 ContextMenu 仅加载特定页面的扩展问题

Chrome Extension trouble with getting a ContextMenu to only load for a specific page

javascript

google-chrome

contextmenu

google-chrome-extension