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

接下来的步骤是制作<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;
  }

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设置为我们的本地网址src。在我们的CSS中，我们通过将图像设置为固定使图像居中，然后将起点设置在页面的一半并且一半。转换是考虑实际居中的图像大小。接下来，我们将img添加到div，将div添加到body并将其称为一天。

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

1 个答案: