Question

我一直在教自己如何创建扩展，以期将其用于CSS注入（以及最终以CSS为载体的SVG注入，但这又是一个问题）。

这是我当前的代码：

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.html中调用popup.js有关，但目前我自己看不到任何解决方法-但我只知道这将非常简单。

（P.S。只是这三个文件，因为这基本上是学习如何使用这种注入技术的实践）

Answer 1

您需要在选项卡中执行代码。为此，请这样更改您的 popup.js ：

In [13]: logging.basicConfig                                                                                                                          
Out[13]: <function logging.basicConfig(**kwargs)>

尝试将CSS注入网页的扩展名而是将CSS自身注入

1 个答案:

尝试将CS​​S注入网页的扩展名而是将CSS自身注入

1 个答案:

尝试将CSS注入网页的扩展名而是将CSS自身注入