在 Chrome 扩展程序中注入图像？

Question

我想制作一个 Chrome 扩展程序，将图像（与扩展程序一起打包）注入网页。我希望它处于固定位置并覆盖在页面上的所有内容之上。使用 Javascript 和 CSS（也许还有 html？）最有效的方法是什么？

到目前为止我的代码：

ma​​nifest.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;
}

所以我基本上拥有所有部分，我想，我只是不确定如何将它们组合在一起？我错过了什么重要的东西吗？任何帮助将不胜感激，谢谢！

Answer 1

接下来的步骤是使用 src 或 imgURL 创建一个 <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，它有一个固定的位置并覆盖了整个框架。我给它一个半透明的背景颜色。然后我们将 img 设置为我们的本地 url，并将 src 设置为。在我们的 css 中，我们通过将图像设置为固定然后让起点位于页面的一半和一半来使图像居中。变换是考虑图像的大小以使其实际居中。接下来，我们将 img 添加到 div 并将 div 添加到 body 并收工。