如何通过Chrome扩展程序将CSS注入网页？ [英] How to inject CSS into webpage through Chrome extension?

问题描述

我不知道如何通过Chrome扩展程序将CSS插入网页。我试图注入到一个网页：

I do not know how to inject CSS into a webpage through a Chrome extension. I am trying to inject this into a web page:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}

这是我的manifest.json：

Here is my manifest.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/*" ]

}

推荐答案

您可以在清单文件中添加一行：

You can have to add an extra line in your manifest file:

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

css：[...]中定义的CSS文件将被添加到符合匹配中提及的位置的每个页面。

The CSS file as defined in "css": ["..."]will be added to every page which matches the location as mentioned in matches.

如果您正在开发Chrome请确保您查看了以下网页：

If you're developing a Chrome extension, make sure that you have a look at these pages:

1. 开发人员指南
   
   
   
   • 清单文件
   
   
   • 内容脚本
   
   
   • 背景页
   
   

1. Developer's guide
   • Manifest files
   • Content scripts
   • Background pages

这篇关于如何通过Chrome扩展程序将CSS注入网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！