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＆amp; 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之后在js文件中包含css以避免问题。不知道如何接近它。

Answer 1

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

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

停止Chrome扩展程序以覆盖原始页面的CSS

1 个答案: