在Chrome擴展中注入圖像？

我想製作一個Chrome擴展程序，它將一個圖像（包含擴展名）注入網頁。我希望它處於固定位置並覆蓋頁面上的所有內容。什麼是最有效的方式來做到這一點---用Javascript和CSS（也許是HTML？）？在Chrome擴展中注入圖像？

代碼我到目前爲止有：

manifest.json的

{ 
    "manifest_version": 2, 

    "name": "OVERLAY IMAGE", 
    "description": "blahblah", 
    "version": "1.0", 

    "icons": { "16": "icon16.png", 
      "48": "icon48.png", 
      "128": "icon128.png" }, 

    "web_accessible_resources": [ 
     "pic.jpg" 
    ], 

    "content_scripts": [{ 
     "matches": ["<all_urls>"], 
     "js": ["content.js"], 
     "css":["css.css"] 
    }], 

    "permissions": [ 
     "activeTab" 
    ] 

}

content.js

不能完全確定之後我加載URL在這裏做什麼。

var imgURL = chrome.extension.getURL('pic.jpg');

css.css

我猜我需要使用某種形式的id，使圖像固定。

#someImage img{ 
    position:fixed; 
}

所以我基本上都有所有的部分，我想我只是不知道如何把它放在一起？我錯過了什麼重要的？任何幫助將不勝感激，謝謝！

來源

2015-10-12 ooohfff

接下來的步驟是製作<img>元素，src的imgURL然後將其添加到DOM。然後你會添加一些CSS到兩個中心，並確保它在一切之上。根據圖像的大小或使用情況，您可能希望在頁面的其餘部分添加某種調光。因此，例如：

CSS

#someName img{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    } 
    #someName{ 
    background-color: rgba(240,240,240,0.7); 
    width: 100%; 
    height: 100%; 
    position:fixed; 
    top:0; 
    left:0; 
    }

var div = document.createElement("DIV"); 
div.id = "someName"; 
var img = document.createElement("IMG"); 
img.src = imgURL; 
div.appendChild(img); 
document.body.appendChild(div);

在這個例子中，我們正在一個div具有固定的位置，並覆蓋整個框架。我給了它一個半透明的背景顏色。然後我們製作img，將src設置爲我們的本地網址。在我們的CSS中，我們通過將圖像設置爲固定，然後使起始點位於頁面中間的一半，並將其放在一半，從而使圖像居中。轉換是爲了說明圖像的大小以實際居中。接下來，我們將img添加到div和div到body並稱之爲一天。

來源

2015-10-12 04:08:45 BeardFist

我建議在您的CSS類中添加'z-index：2147483647'來滿足「並覆蓋頁面上的所有內容」要求 –

@BeardFist感謝您的迴應！它的工作:) – ooohfff

@AlexBelozerov好主意 – ooohfff

在Chrome擴展中注入圖像？

回答

相關問題