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には何かをして、CSP css/extension_website_result.cssで拡張ページを読み込みます。

これは素晴らしい動作します。しかし、いくつかのサイトでは、拡張CSSはメインサイトのCSSを妨害しており、デザインがうんざりしています。 私は"run_at": "document_idle"を試しましたが、それでも動作しません。 アイデア？私は、CSSがロードされていると同時に、この干渉がロードされているときにCSSがロードされていると思います。 Chrome CSSを使用するには、誰も良い習慣を知っていますか？または、問題を避けるために、docuemnt.readyの後にjsファイルにCSSを含めることができます。それに近づく方法を知らない。

ドキュメントが読み込まれた後あなたは、CSSを追加するためにJavaScriptを使用することができ

Answer 1

：

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