Импорт require.js в расширение Chrome
Я создаю расширение и начал с руководства для разработчиков Chrome. Я хочу очистить веб-страницу и получить всплывающее окно, если цена достигнет значения X.
Чтобы заставить это работать, мне нужно импортировать "cheerio". Я видел много вопросов, похожих на этот, загрузил require.js в папку lib, включенную в манифест ... но я не могу понять обходной путь:
Это мой 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.info("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.info('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.info(gamesList); // Output the data in the terminal
}
getData("URLTOPARSE");
Я получаю знаменитую "Uncaught ReferenceError: require is not defined" ... Есть идеи, что я делаю не так?
Вам не нужно приветствовать это, вам нужен jQuery.
1) Загрузка <script> является асинхронной, поэтому require не определен в текущей запущенной функции, вам следует дождаться события загрузки скрипта. 2) Фоновый скрипт выполняется на отдельной скрытой фоновой странице, поэтому вы не можете использовать его функции напрямую. И если вы включили background.js в popup.html, это неправильно - вам нужно извлечь функцию в общий js-файл, а затем включить ее как во всплывающий html, так и в ключ фоновых «скриптов» в manifest.json. 3) Но вам вообще не нужен loadScript - вы можете просто включить require.js в свой всплывающий html.
Пробовал это - «Но вам вообще не нужен loadScript - вы можете просто включить require.js в свой всплывающий html». и никакого успеха ... Теперь я получаю "Неперехваченная ошибка: имя модуля" cheerio "еще не загружено для контекста: _. Используйте require ([])" Погуглить ...
Для того, чтобы require работал, фактические скрипты должны быть загружены заранее, чтобы они зарегистрировались во внутренней карте требования. Вместо использования require вы, вероятно, можете просто загрузить эти сценарии прямо во всплывающем html.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Вам нужно использовать упаковщик. Узнайте о модульных системах JavaScript.