Я пытаюсь создать базовое расширение Google Chrome, которое просто копирует исходный HTML-код на странице, на которой я нахожусь. Я никогда не создавал расширение Chrome, и я действительно застрял и был бы признателен за помощь. Я запустил расширение, используя руководство по Chrome, и из того, что я прочитал в Интернете, я использую скрипты для доступа к веб-странице. Однако я не знаю, как вызывать скрипты контента. Я пытался использовать операторы импорта, но получил ошибки - я думаю, что я действительно неправильно понимаю, как все это работает. Я пытаюсь также отобразить журнал консоли в консоли веб-страницы вместо консоли расширения Chrome.
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
manifest.json
"name": "Company Websites",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"page_action": {
"default_popup": "popup.html"
},
"permissions": ["storage","declarativeContent"],
"manifest_version": 2
}
content.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("changeColor").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
console.log("hello?");
//somehow copy source code
}
background.js
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: '* insert target web address*'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
Любая помощь будет признательна!