Как импортировать модуль npm mark.js для использования в расширении chrome?

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 или, возможно, я взял неправильный файл?Я установил модуль npm, используя npm install mark.js, а затем скопировал файл из npm_modules/mark.js/dist/mark.js.

Answer 1

После этого комментария я внес следующие изменения, и это работает!

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");'});
    })
  });
};