CSS不適用於div我注入頁面

Question

所以我做了一個chrome擴展，當您將鼠標懸停在指向它的超鏈接上時，可以有效地爲您提供網頁預覽。

我這樣做是通過創建一個div並用各種項目填充它。問題是由於某種原因，我指定的CSS樣式表沒有被注入到div中，而是div正在接受其父（您當前所在的網站）的樣式，這是有問題的，因爲我無法控制外觀。

這裏是我的表現，我嘗試注入的CSS：

{ 
    "manifest_version": 2, 

    "name": "Link Preview", 
    "description": "This extension provides a preview of a hyperlinks destination on hover action.", 
    "version": "1.0", 

    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "js": ["jquery-1.11.1.min.js","core.js"], 
     "css" : ["style.css"], 
     "run_at":"document_end", 
     "all_frames": false 
    } 
    ], 
    "browser_action": { 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "tabs", 
    "<all_urls>" 
    ], 
    "web_accessible_resources": ["index.html","style.css"] 

} 

這裏是與元素的HTML文件。如果我將樣式應用於html中的項目，但說實話，這樣做很麻煩。

<div id="icon_wrapper"> 
    <img id="icon_img" 
     src="https://i.imgur.com/mLAiR8t.png" 
     alt="Webpage Icon" > 
    </div> 

    <div id="title_wrapper" > 
    <h1 id="title_string"> 
     testing</h1> 
    </div> 

    <div id="description_wrapper"> 
    <h1>description</h1> 
    </div> 

這裏是失敗注入CSS，我甚至嘗試，而不是title_string造型H1和沒有工作之一：

#title_string { 
    background-color: #ffffff !important; 
    margin: 3px !important; 
    padding: 3px !important; 
    font-family: "Times New Roman", Times, serif !important; 
    color: #a48938 !important; 
} 

我真的很感激任何幫助，我一直在努力在此永遠

Answer 1

Xan是對的，你需要看看at this question。特別是我會指出你的回答here。我研究了幾乎所有關於這個問題的知識。簡短的總結就是在這個答案中。我在我鏈接的博客文章中分享了我學到的所有內容。