相关疑难解决方法(0)

如何通过Chrome扩展程序将CSS注入网页?

我不知道如何通过Chrome扩展程序将CSS注入网页.我想把它注入一个网页:

body {
   background: #000 !important;
}

a {
   color: #777 !important;
}
Run Code Online (Sandbox Code Playgroud)

这是我的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/*" ]

}
Run Code Online (Sandbox Code Playgroud)

javascript css google-chrome google-chrome-extension

36
推荐指数
2
解决办法
4万
查看次数

我可以使用内容脚本js文件以编程方式注入CSS文件吗?

我可以使用内容脚本js文件以编程方式注入CSS文件吗?

当js文件链接到我的popup.html时,我可以注入css.问题是我必须单击按钮打开弹出窗口才能注入css.我希望它在后台自动发生.

我的代码会发生什么......

  1. 通过XMLHttpRequest从MySQL数据库中获取变量
  2. 调用函数"processdata()"
  3. "processdata"将处理来自XMLHttpRequest的数据.更具体地说,拆分变量,将其放入2个不同的变量并使其成为全局变量
  4. 我叫这个函数,"click()"
  5. "click"然后使用setTimeout在1250毫秒后设置css
  6. 我使用chrome.tabs.insertCSS来插入css.css名称是变量" currenttheme "

正如我之前提到的,它确实可以使用弹出窗口.但是在注入CSS之前必须打开弹出窗口.

如何在没有任何用户交互的情况下自动完成这一切?

这是我的代码:

    function getData() {
if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        user_data = xmlhttp.responseText;
        window.user_data = user_data;
        processdata();
        }
      }
    xmlhttp.open("GET","http://localhost:8888/g_dta.php",true);
    xmlhttp.send();
}

getData();

function processdata() {
  var downdata = user_data.split('|||||');
  var installedthemes = downdata[0];
  var currenttheme = downdata[1].toString();
  window.currenttheme = …
Run Code Online (Sandbox Code Playgroud)

javascript google-chrome google-chrome-extension google-chrome-devtools

19
推荐指数
2
解决办法
2万
查看次数

Manifest v3 资源必须列在 web_accessible_resources 中

即使在 manifest.json 中正确声明了“image/copy.svg”,我也会收到此错误

拒绝加载 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg。资源必须在 web_accessible_resources 清单键中列出,以便由扩展程序之外的页面加载。

如果我去 chrome-extension://pofbdjeepddggbelfghnndllidnalpde/images/copy.svg 我可以成功地看到加载的图像。

css/style.css

.copy-icon{
    content:url('chrome-extension://__MSG_@@extension_id__/images/copy.svg');
    height: 16px;
    width: auto;
    margin-right: 0px;
}
Run Code Online (Sandbox Code Playgroud)

html

<button alt="Copy to clipboard" class="clipboard" data-clipboard-text="TEXT">
  <img class="copy-icon"></img>
</button> 
Run Code Online (Sandbox Code Playgroud)

清单文件

    "manifest_version": 3,
    "content_scripts": [
    {
      "matches": ["https://*.example.com/*"], 
      "js": ["contents/results.js"],
      "css": ["css/style.css"],
      "run_at": "document_end"
    }
  ],
    "web_accessible_resources": [{
        "resources": ["images/copy.svg"],
        "matches": [],
       "extension_ids": []
      }], 
Run Code Online (Sandbox Code Playgroud)

google-chrome-extension

3
推荐指数
1
解决办法
1097
查看次数