Question

我正在构建扩展程序，并从Chrome开发者指南开始。如果价格达到X，我想抓取网页并弹出一个页面。

我要使其正常工作，我需要输入“ cheerio”。我已经看到了很多与此问题类似的问题，将require.js下载到清单中包含的lib文件夹中了……但我听不懂workarround：

这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
  </body>
  <script src="options.js"></script>
</html>

这是我的清单：

{
    "name": "PriceTracker",
    "version": "1.0",
    "description": "Track your wishlist!",
    "permissions": ["activeTab", "declarativeContent", "storage"],
    "background": {
        "scripts": ["background.js","lib/require.js"],
        "persistent": false
      },
      "options_page": "options.html",
      "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
          "16": "images/get_started16.png",
          "32": "images/get_started32.png",
          "48": "images/get_started48.png",
          "128": "images/get_started128.png"
        }
      },
      "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      },

    "manifest_version": 2
  }

这是background.js：

'use strict';

// tested this and no success
function loadScript(scriptName, callback) {
    var scriptEl = document.createElement('script');
    scriptEl.src = chrome.extension.getURL('lib/' + scriptName + '.js');
    scriptEl.addEventListener('load', callback, false);
    document.head.appendChild(scriptEl);
  }





chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });

  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });

});

这是options.js：

'use strict';

let page = document.getElementById('buttonDiv');

const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];

function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function () {
      chrome.storage.sync.set({ color: item }, function () {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);


function getData(url) {
  loadScript("require");
  let cheerio = require('cheerio'); //<-- this is where I get the non existent "require"
  let jsonframe = require('jsonframe-cheerio');

  let $ = cheerio.load(url);
  jsonframe($); // initializes the plugin

  var frame = { ...... };

  var gamesList = $('.offerDetails.category.row').scrape(frame);
  console.log(gamesList); // Output the data in the terminal
}

getData("URLTOPARSE");

我得到了著名的“ Uncaught ReferenceError：未定义require” ... 对我在做什么错有任何想法吗？

将require.js导入Chrome扩展程序

0 个答案: