Question

我尝试将模块mark.js导入chrome扩展程序。我曾尝试修改Chrome教程中的代码。这是我最近尝试过的：

manifest.json

{
  "name": "Highlight",
  "version": "1.0",
  "description": "Highlight some text",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["http://*.com/*"],
      "js": ["mark.js"]
    }
  ],
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.js（在popup.html中调用）

let changeColor = document.getElementById('changeColor');

changeColor.onclick = function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
      tabs[0].id,
      {code: 'var context = document.querySelector(".article-body-component"); var instance = new Mark(context); instance.mark("grows");'});
  });
};

当我单击站点上的按钮时，出现错误Uncaught ReferenceError: Mark is not defined at <anonymous>:1:100

我对npm模块或perphaps的要求不正确是怎么回事？我使用npm install mark.js安装了npm模块，然后从npm_modules/mark.js/dist/mark.js复制了文件。

Answer 1

在this comment之后，我进行了以下更改，并且有效！

let changeColor = document.getElementById('changeColor');

changeColor.onclick = function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(null, { file: "mark.js" }, function() {
      chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'var context = document.querySelector(".article-body-component"); var instance = new Mark(context); instance.mark("grows");'});
    })
  });
};

如何导入NPM模块mark.js以在Chrome扩展程序中使用？

1 个答案: