Я новичок в этом материале и отредактировал это из учебника, так что извините, если это просто смешно.
Да, я знаю, что это было опубликовано ранее.Я потратил несколько часов, пытаясь найти, как это сделать, и передать переменную из скрипта контента во всплывающее окно и Расширение Chrome, как отправить данные из скрипта контента в popup.html , которые очень близкито, что мне нужно, не работает для меня.
Итак, есть сайт, который содержит содержание главы в div внутри другого div всех глав.Предыдущая / следующая главы будут отображаться при прокрутке вверх / вниз.
Я хочу сделать так, чтобы в popup.html появлялась новая кнопка для каждого раздела div на сайте.У меня проблемы с отображением новых кнопок.
То, что у меня сейчас есть:
манифест
{
"manifest_version": 2,
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["activeTab", "declarativeContent", "tabs", "storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["http://webnovel.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}],
"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"
}
}
background.js
chrome.runtime.onInstalled.addListener(function() {
console.log("Extension running!");
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'www.webnovel.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
content.js
chrome.runtime.onMessage.addListener(
function (message, sender, response) {
console.log("Request received");
switch(message.type) {
case "getChapterCount":
response(5);
break;
default:
console.error("Unrecognised message: ", message);
}
return true;
}
);
popup.js
let page = document.getElementById('buttonDiv');
function constructOptions(length) {
console.log(length);
var i;
for (i = 0; i < length; i++) {
let button = document.createElement('button');
button.addEventListener('click', function() {
//console.log('number is ' + i);
});
page.appendChild(button);
}
}
update.onclick = function(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "getChapterCount"}, constructOptions)}
)
};
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<div id="buttonDiv">
<button id="update"></button>
</div>
<script src="popup.js"></script>
</body>
</html>
Ожидается: я захожу на сайт, открываю всплывающее окно и нажимаюкнопка одинокого обновления, новая кнопка появляется для каждой главы в главах div.Или, поскольку я заменил javascript, который на самом деле считывает количество глав с сайта всего на 5, появляются еще пять кнопок.(никто не делает)
Факт: Инспектор расширений показывает, что строка 4 popup.js (console.log (length)) не определена, когда я нажимаю кнопку обновления.Инспектор на реальной веб-странице, где я считаю, что content.js должен печатать какие-то материалы, ничего не печатает.