如何通过Chrome扩展将CSS注入到网页中?

hmmo2u0o  于 2023-08-09  发布在  其他
关注(0)|答案(4)|浏览(244)

我不知道如何通过Chrome扩展程序将CSS注入到网页中。我试着把这个插入到网页中:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

字符串
这是我的清单.json:

{
"update_url":"http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"]
    }
  ],

    "permissions": [ "tabs", "http://test-website.com/*" ]

}

xienkqul

xienkqul1#

您可能需要在清单文件中添加额外的一行:

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

字符串
"css": ["..."]中定义的CSS文件将被添加到与matches中提到的位置相匹配的每个页面。
如果您正在开发Chrome扩展程序,请确保查看以下页面:

***Developer's guide**第一个字符

6qftjkof

6qftjkof2#

你也可以使用Chrome Tabs API webpage上的语法将css文件插入到一个或多个标签页的内容中:

chrome.tabs.insertCSS(integer tabId, object details, function callback);

字符串
当然,首先需要目标选项卡的ID。
Chrome扩展文档没有讨论 * 如何 * 解释注入的CSS,但事实是,通过这种方法或将它们包含在清单中注入到网页中的CSS文件被解释为用户样式表。
在这方面,重要的是要注意,如果你使用这些方法注入样式表,它们将受到一个关键的限制(至少,从Chrome v.19开始):Chrome忽略“!用户样式表中的“重要”指令。您注入的样式规则将被页面中包含的任何内容所超越。
如果你想避免插入内联样式规则,一个解决方法如下(我使用jQuery进行实际插入,但它可以直接用JavaScript完成):

$(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
    .attr("rel","stylesheet")
    .attr("type","text/css")
    .attr("href", path));
});


然后可以将样式表放在扩展的styles文件夹中,但不需要在清单中的任何位置列出它。上面的相关部分是,您将使用API获取样式表的URL,然后将其作为链接的href值插入。现在,您的样式表将被赋予更高的优先级,您可以使用“!重要的“指示”。
这是我在最新版本的Chrome中唯一有效的解决方案。

wkftcu5l

wkftcu5l3#

看起来chrome.tables.insertCSS是贬值,你应该使用。
https://developer.chrome.com/docs/extensions/reference/scripting/
这就是我正在做的。

let [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
});
chrome.scripting.insertCSS({
        target: {
            tabId: tab.id
        },
        files: ["button.css"],
    },
    () => {
        chrome.scripting.executeScript({
            target: {
                tabId: tab.id
            },
            function: doSomething,
        });
    });

字符串

vxbzzdmp

vxbzzdmp4#

没那么难你可以使用这个:

{
  "update_url": "http://clients2.google.com/service/update2/crx",
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test extension for Google Chrome.",
  "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" },
  "background_page": "background.html",
  "host_permissions": ["*://test-website.com/*"],
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*", "https://test-website.com/*"],
      "js": ["js/content-script.js"],
      "css": ["css/styles.css"]
    }
  ]
}

字符串

相关问题