JavaScript 不会从 Chrome 扩展上下文菜单运行

Question

免责声明:我是 JavaScript 新手，之前从未开发过 Chrome 扩展程序。

我正在尝试开发一个 Chrome 扩展程序，当用户选择页面上的某些文本、右键单击，然后单击上下文菜单按钮时，该扩展程序会运行一些 JavaScript。我已经确定(基于从 Chrome 控制台运行它)我编写的 JavaScript 按预期运行。现在剩下的就是进行扩展。

我可以加载扩展，并且可以让它出现在页面上并且看起来正在运行。然而，它似乎没有做任何事情，控制台也没有返回任何输出。 (我读到我无法在事件页面中运行内联 JavaScript，因此使用 addListener。)我是否错误地设置了上下文菜单？我的脚本中有一个(或多个)错误吗？

manifest.json

{
  "name": "My Extension",
  "description": "sample",
  "version": "0.0.1",
  "permissions": ["contextMenus"],
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

background.js

chrome.runtime.onInstalled.addListener(function() {
  var context = "selection";
  var title = "My Extension";
  var id = chrome.contextMenus.create({"title": title, "contexts":[context],
                                         "id": "context" + context});  
});

chrome.contextMenus.onClicked.addListener(getSHA);

// Get file path of file to be staged
// Get SHA
function getSHA(){
    stagedFile = window.getSelection().toString()
    console.log(stagedFile)
    baseURL = window.location.href.slice(0, -6); 
    prNumber = baseURL.slice(-4); 
    xhr = new XMLHttpRequest(); 
    xhr.open("GET", "https://api.github.com/repos/kubernetes/kubernetes.github.io/pulls/"+prNumber, false); 
    xhr.send(); 
    json_data = JSON.parse(xhr.responseText); 
    shaValue = (json_data.head.sha)
    console.log("SHA: "+shaValue)
    getNetlify;
};

// Get Netlify URL
function getNetlify(){
    xhr2 = new XMLHttpRequest(); 
    xhr2.open("GET", "https://api.github.com/repos/kubernetes/kubernetes.github.io/commits/"+shaValue+"/status", false); 
    xhr2.send(); 
    json_data2 = JSON.parse(xhr2.responseText, function(key, value) { if (key == "target_url" && value.includes("netlify")) { netlifyURL = value; }});
    openStaging
};

// Stage file
function openStaging(){
    window.open(netlifyURL+"/"+stagedFile)
};

Answer 1

您需要将“内容脚本”添加到您的manifest.json中。这就是注入(inject)到页面中运行的代码类型。后台脚本根本无权访问该页面。因此，请查看有关内容脚本的文档。 https://developer.chrome.com/extensions/content_scripts

您需要将以下代码添加到 manifest.json 中:

"content_scripts": [
  {
    "matches": ["http://www.google.com/*"],
    "css": ["mystyles.css"],
    "js": ["myscript.js"]
  }
]

使用此代码，只要用户访问与我提供的网址“匹配”的网站，扩展程序就会注入(inject)该页面 mystyles.css 和 myscript.js。所以......你的模式将类似于 http*://*/* 。这会将脚本注入(inject)到用户将访问的任何页面上。

接下来，要完成您想要完成的任务，您不需要后台脚本。因此，您可以从 manifest.json 中删除它。

所以你的 manifest.json 看起来像这样:

{
  "name": "My Extension",
  "description": "sample",
  "version": "0.0.1",
  "permissions": ["contextMenus"],
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["myscript.js"]
    }
  ],
  "manifest_version": 2
}

然后将您的代码放入 myscript.js 文件(或您想要调用的任何文件)中，您应该会看到它开始在页面上运行。