gpt4 book ai didi

javascript - 尝试将 CSS 注入(inject)网页而不是将 CSS 注入(inject)自身的扩展

转载 作者:行者123 更新时间:2023-11-30 14:14:27 28 4
gpt4 key购买 nike

我一直在自学如何创建扩展,以期将它们用于 CSS 注入(inject)(以及最终以 CSS 为载体的 SVG 注入(inject),但那是以后的问题)。

这是我当前的代码:

list .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 片段注入(inject)当前网页的主体,而是直接将其注入(inject) popup.html 的主体。看动图:

A beautiful demonstration of the problem.

我知道这与在 popup.html 中调用 popup.js 有关,但目前我自己看不到解决方法 - 但我只知道它会非常简单。

(注:只有这三个文件,因为这基本上是学习如何使用这种注入(inject)技术的练习)

最佳答案

您需要执行tab中的代码。为此,请像这样更改您的 popup.js:

let changeColour = document.getElementById('changeColour');

function addStyleString(str) {
// preparing the code as a string
var code = `
var node = document.createElement('style');
node.innerHTML = '${str}';
node.setAttribute('id', 'inserted-style');
document.body.appendChild(node);
`;

// executing the code
chrome.tabs.executeScript(null, {code: code});
}

changeColour.onclick = addStyleString('body {filter: blur(5px);}');

关于javascript - 尝试将 CSS 注入(inject)网页而不是将 CSS 注入(inject)自身的扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53824786/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com