如何仅在单击扩展程序中的按钮时将 CSS 添加到内容页面？

【问题标题】：How to add the CSS to content page only on clicking of a button from an extension?如何仅在单击扩展程序中的按钮时将 CSS 添加到内容页面？
【发布时间】：2025-12-02 09:30:01
【问题描述】：

我只是想知道是否有一种方法可以仅在单击 chrome 扩展程序中的按钮时将 css 文件注入页面。一旦再次点击扩展中的按钮，也可能删除注入的css。

Manifest.json

{
   "manifest_version": 2,
   "name": "KS Scrapper",
   "description":"Simple Scrapper",
   "version" : "1.0.0",
   "icons":{"128":"images/ks_logo_128.png"},
   "browser_action" : {
       "default_icon" : "images/ks_logo_19.png",
       "default_popup" : "popup.html"
   },
   "content_scripts" : [
           {
           "matches": ["<all_urls>"],
           "js" : ["jquery-2.1.4.min.js", "content.js"],
           "css" : ["c.css"]
       }
   ],
   "web_accessible_resources": [
       "css/style.css",
       "c.css"
   ],
   "permissions": ["tabs"],
   "background":{
       "scripts":["background.js"]
   }
}

我将 c.css 添加到内容脚本中，它可以完成工作，但我想知道是否有任何方法可以在它处于活动状态和不使用按钮时进行切换。如果我犯了任何错误，请纠正我。谢谢

【问题讨论】：

标签： javascript google-chrome-extension google-chrome-devtools

【解决方案1】：

不要在 manifest.json 中注入 css，而是在页面本身中创建一个带有特殊 id 的 link 元素，以便您以后可以使用标准 DOM 方法删除此元素。

manifest.json：

此任务不需要 content_scripts 部分
"permissions": ["activeTab"]，这个任务不需要tabs

popup.js，里面有一些click监听器：

chrome.tabs.executeScript({file: 'toggle-style.js'})

切换样式.js：

(() => {
  const id = chrome.runtime.id;
  let el = document.getElementById(id);
  if (el) {
    el.remove();
  } else {
    el = document.createElement('link');
    el.id = id;
    el.rel = 'stylesheet';
    el.href = chrome.runtime.getURL('c.css');
    document.head.appendChild(el);
  }
})();

【讨论】：