停止 Chrome 扩展以覆盖原始页面的 css

Question

我创建了一个扩展程序，它将添加到用户访问的每个页面上，并根据他们的域名做一些事情。 这是我的 manifest.js 文件

{
  ...
    "version": "2.9",
    "background": {
      "scripts": [ "js/jquery-2.1.4.min.js", "js/background.js","js/select2.min.js","js/lodash.js","js/bootstrap.min.js","js/bootstrap-select.min.js" ]
    },
    "content_scripts": [
    {   
        "css": ["css/extension_website_result.css","css/bootstrap.min.css","css/bootstrap-select.min.css","css/select2.css" ],
        "js": [ "js/common.js" , "js/lodash.js", "js/jquery-2.1.4.min.js", "js/jsapi.js", "js/select2.min.js" ,"js/bootstrap.min.js","js/bootstrap-select.min.js", "js/extension_site_search_result.js" ],
        "exclude_matches": [ "*://*.google.com/search*", "*://*.google.com.au/*", "*://*.linkedin.com/profile/view*", "*://*.linkedin.com/in/*", "*://*.linkedin.com/pub/*", "*://*.linkedin.com/recruiter/profile/*", "*://*.linkedin.com/vsearch/*", "*://*.linkedin.com/sales/accounts*", "*://*.linkedin.com/cap/peopleSearch/*", "*://*.linkedin.com/recruiter/search*", "*://*.linkedin.com/sales/profile/*", "*://*.linkedin.com/sales/search*" , "*://*.mail.google.com/*", "*://*.dev.found.ly/*", "*://*.demo.found.ly/*" ],
        "exclude_globs":  ["*://*.google.*/*"],
        "matches": [ "<all_urls>"]
    }
      ],
    ...
  }

exclude_matches & exclude_globs 不会运行这个扩展，因为我已经为这些页面添加了其他页面。因此，现在如果用户访问任何其他页面，扩展程序将调用 js/extension_site_search_result 并在 document.ready 上做一些事情并使用 css css/extension_website_result.css 加载扩展程序页面。

这很好用。但是在某些站点上，扩展 css 会干扰主站点的 css 并弄乱设计。 我试过"run_at": "document_idle"，但还是不行。 有任何想法吗？我认为 css 在加载 DOM 的同时加载，因此会产生这种干扰。任何人都知道使用 Chrome CSS 的好习惯吗？或者有什么方法可以在docuemnt.ready 之后将css 包含在js 文件中以避免出现问题。不知道如何接近它。

Answer 1

您可以在文档加载后使用 javascript 附加 css：

$(document).ready(function() {
  if(screen.width > 1024) {
     $('head').append('<link href='file.css' type='text/css' rel='stylesheet' />')
  }
});