Question

chrome.tabs.insertCSS(tabId, { code : '@import url("custom.css");' });

OR

chrome.tabs.insertCSS(tabId, { file : 'importer.css' });

importer.css ：

@import url("custom.css");
a { color:red!important; } /* this rule applied successfully though. */

似乎没有按预期工作。

为什么它不起作用以及如何使其发挥作用？

修改

也许我正在查看错误的源代码位置，但源代码表明它使用常规样式表解析器来解析注入的CSS。换句话说，如果@import指令在常规CSS文档中有效，它也应该在注入的CSS中工作。

https://code.google.com/p/chromium/codesearch#chromium/src/extensions/renderer/script_injection.cc&q=script_injection.cc&sq=package:chromium&type=cs&l=312-320

void ScriptInjection::InjectCss(blink::WebLocalFrame* frame) {
  std::vector<std::string> css_sources =
      injector_->GetCssSources(run_location_);
  for (std::vector<std::string>::const_iterator iter = css_sources.begin();
       iter != css_sources.end();
       ++iter) {
    frame->document().insertStyleSheet(blink::WebString::fromUTF8(*iter));
  }
}

修改

不起作用的示例代码：

目录结构：

ext.root
|-- custom.css
|-- custom.css.js
|-- importer.css
|-- manifest.json

的manifest.json ：

{
   "background": {
      "scripts": [ "custom.css.js" ],
      "persistent": true
    },
   "manifest_version": 2,
   "name": "custom.css",
   "version": "1.0",
   "web_accessible_resources" : [ "*" ],
   "permissions" : [ "webNavigation", "http://*/", "https://*/" ]
}

custom.css.js ：

chrome.webNavigation.onCommitted.addListener(function(details) {

    console.log('inserting css');
    console.log(chrome.runtime.getURL("custom.css"));

    chrome.tabs.insertCSS(details.tabId, { file : 'importer.css' });

    chrome.tabs.insertCSS(details.tabId,  { code : '@import url("custom.css");' });
    chrome.tabs.insertCSS(details.tabId,  { code : '@import url(custom.css);' });

    chrome.tabs.insertCSS(details.tabId,  { code : '@import url("' + chrome.runtime.getURL("custom.css") + '");' });
    chrome.tabs.insertCSS(details.tabId,  { code : '@import url(' + chrome.runtime.getURL("custom.css") + ');' });

    chrome.tabs.insertCSS(details.tabId,  { code : '@import "custom.css";' });
    chrome.tabs.insertCSS(details.tabId,  { code : '@import custom.css;' });

    chrome.tabs.insertCSS(details.tabId,  { code : '@import "' + chrome.runtime.getURL("custom.css") + '";' });
    chrome.tabs.insertCSS(details.tabId,  { code : '@import ' + chrome.runtime.getURL("custom.css") + ';' });
});

importer.css ：

@import "custom.css";
@import "chrome-extension://__MSG_@@extension_id__/custom.css";

@import custom.css;
@import chrome-extension://__MSG_@@extension_id__/custom.css;

@import url("custom.css");
@import url("chrome-extension://__MSG_@@extension_id__/custom.css");

@import url(custom.css);
@import url(chrome-extension://__MSG_@@extension_id__/custom.css);

body { background-color: red!important; } /* change page background color to red */

custom.css _{（此文件中的规则应该应用但不应用）}：

body { border: 20px solid red!important; } /* add a 20px border around the body. */
a { background-color: blue!important; } /* change all link's background color to blue. */

Answer 1

如果您尝试将此类文件注入选项卡，则相对URL将作为其来源即如果您尝试将此注入http://example.com/test/index.html，则上述CSS将尝试加载http://example.com/test/custom.css。

如果扩展程序中包含custom.css，则应使用从chrome.runtime.getURL()获取的绝对路径：

chrome.tabs.insertCSS(
  tabId, 
  { code : '@import url("' + chrome.runtime.getURL(custom.css) + '");' }
);

您可以尝试使用特殊常量@@extension_id：

@import url("chrome-extension://__MSG_@@extension_id__/custom.css");

但我并非100％确定它会起作用。

最后，确保导入的CSS文件位于web_accessible_resources。

Answer 2

@important不能使用tabs.insertCSS（）。 insertCSS似乎在页面中注入之前被解释。如何解释它们没有记录。例如！重要的是既不起作用。

如何@import使用chrome.tabs.insertCSS（）？

2 个答案: