个人中心
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
文章推荐： ios - 在 swift xcode 中通过 View 发送数据
文章推荐： swift - SpriteKit GameScene 函数被按钮调用后不会添加 SKSpriteNode
文章推荐： xcode - 动态更改标签栏背景颜色
文章推荐： javascript - 让 Javascript 检查按下了哪个 Button 并用它更改特定的 HTML 详细信息
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com