Я учил себя, как создавать расширения с целью их использования для внедрения CSS (и, в конечном итоге, внедрения SVG с CSS в качестве носителя, но это проблема для другого дня).
Вотмой текущий код:
manifest.json
{
"name": "SVG Extension Attempt",
"version": "1.0",
"description": "SVG filter please...",
"permissions": ["activeTab", "declarativeContent", "storage"],
},
"browser_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"
}
},
{
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 60px;
outline: none;
background-color: magenta;
}
</style>
</head>
<body>
<button id="changeColour">Change colour</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
let changeColour = document.getElementById('changeColour');
function addStyleString(str) {
var node = document.createElement('style');
node.innerHTML = str;
node.setAttribute('id', 'inserted-style');
document.body.appendChild(node);
}
changeColour.onclick = addStyleString('body {filter: blur(5px);}');
До сих пор мне удалось запустить расширение, но я обнаружил, что вместо введения фрагмента CSS в тело текущей веб-страницы вместо этого он вставляет его прямов тело popup.html.См. Gif:
Я знаю, что это как-то связано с вызовом popup.js из popup.html, но я не вижу обходного путия на данный момент - но я просто знаю, что это будет что-то невероятно простое.
(PS Это всего лишь три файла, потому что это в основном практика, чтобы научиться использовать эту технику инъекции)