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中添加“内容脚本”。这是一种注入页面运行的代码。后台脚本根本无法访问该页面。因此，请查看有关内容脚本的文档。 https://developer.chrome.com/extensions/content_scripts

您需要在代码中添加以下内容到manifest.json：

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

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

接下来，要完成您要完成的任务，您不需要后台脚本。因此，您可以从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文件（或任何您想要调用的文件），您应该会看到这个开始在页面上运行。

JavaScript无法从Chrome扩展程序上下文菜单

1 个答案: