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

Question

I want to make a Chrome extension that injects an image (that is packed with the extension) onto a webpage. I want it to be in a fixed position and overlaid on top of everything on the page. What is the most efficient way to do this---with Javascript and CSS (and maybe html?)?

Code I have so far:

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

Not totally sure what to do here after I load the URL.

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

css.css

I'm guessing I need to use some sort of id to make the image fixed.

#someImage img{
   position:fixed;
}

So I basically have all the parts, I think, I'm just not sure how to put it all together? Am I missing anything important? Any help would be appreciated, thank you!

Answer 1

The next steps would be to make an <img> element with a src of imgURL then add that to the DOM. Then you will add some css to both center it and make sure it is on top of everything. Depending on the size or use of that image you may want to add some sort of dimming to the rest of the page. So for example:

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);

In this example we are making a div that has a fixed position and covers the whole frame. I gave it a translucent background color. Then we make and img with the src set to our local url. In our css we make the image centered by setting it to fixed then having the starting point be half way down the page and half across. The transform is to account for the size of the image to actually center it. Next we add the img to the div and the div to the body and call it a day.