在Chrome擴展程序中插入圖片？

Question

我想制作一個Chrome擴展程序，將圖像（與擴展程序一起包裝）注入到網頁中。 我希望它處於固定位置並覆蓋在頁面上所有內容的頂部。 使用Javascript和CSS（甚至是html），最有效的方法是什么？

我到目前為止的代碼：

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

加載網址后，我不太確定該怎么做。

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

css.css

我猜我需要使用某種ID來固定圖像。

#someImage img{
   position:fixed;
}

所以我想我基本上擁有所有部分，只是不確定如何將它們放在一起？ 我錯過任何重要的東西嗎？ 任何幫助，將不勝感激，謝謝！

Answer 1

下一步將是使用imgURL的src創建一個<img>元素，然后將其添加到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;
  }

JS

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

在此示例中，我們將制作一個具有固定位置並覆蓋整個框架的div 。 我給它提供了半透明的背景色。 然后我們將src設置為我們的本地url並進行img 。 在我們的CSS中，我們將圖像設置為固定，然后使起點位於頁面的一半下方，跨過一半，從而使圖像居中。 轉換是要考慮將圖像實際居中的大小。 接下來，我們將img添加到div ，並將div到body並將其命名為day。