Today I happened to see fish fried in a technical way and was very interested. I’ve been reading web recently, and the pictures I scrapy picked up a while ago are not very convenient to view. So I decided to follow suit and try writing a Chrome extension from scratch.

The resources

Online this aspect of the information is quite a lot, MY reference is: github.com/sxei/chrome… How to write an extension from scratch, you can basically complete a simple extension, the rest of the customization needs a little time to study.

Extended demo:

Use steps:

  1. Install the extension: Open the Chrome extension page and add the extension pack (Download address) Unzip and drag to the extension page to install,

    The peacock icon is displayed in the upper right corner.

  2. Continuing the benefits from last time,How to take good private room photo. Open the above page, the icon switch appears in the upper left corner. Click to view, click again to close.
  3. Note: due to a pull-down refresh, the page will not return all images of the answer at once. After viewing a loaded picture, you can manually pull down to refresh and click the icon to continue browsing the picture.

Development steps:

After reading the link above, I have a general idea of the structure of this directory. Mine is as follows:

manifest.json
manifest2.json 

{
  "name": "zhihuimage"."description": "zhihuimage"."version": "1.0"."manifest_version": 2."browser_action": {
    "default_popup": "html/zhihu.html"."default_icon": "img/ic_launcher.png"
  },
  "icons": {
    "16": "img/ic_launcher.png"."48": "img/ic_launcher.png"."128": "img/ic_launcher.png"}, // will always be resident background JS or page"background"If you specify JS, a background page will be generated automatically"page": "html/zhihu.html"
    //"scripts": ["js/background.js"]},"content_scripts": [{"matches": ["https://www.zhihu.com/question/*"]."js": ["js/content_script.js"]."css": ["css/zhihu.css"]}],"commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+E"."mac": "MacCtrl+Shift+E"
      },
      "description": "open html"}}, // A list of plug-in resources that can be accessed directly by the normal page"web_accessible_resources": [
    "js/inject.js"."img/ic_launcher.png"]}Copy the code

You can read it by referring to another file.

Here is the content_script.js file: The extension is simple, and the idea is to insert a div element in the body and place the image inside it to form a list.

/ / the document operationlet div_str = '<div class="zhihu-image">\n' +
    ' 
      
\n' +
    ' '

let node = document.createElement("div")
let img = document.createElement("img")
img.src = chrome.extension.getURL("img/ic_launcher.png");
img.alt = "zhihu"
img.title = "zhihu"
img.classList = "zhihu"
img.addEventListener("click", () => {// Click event console.log()"click")
    loadImg()
})
node.appendChild(img)
document.body.appendChild(node)


let imageNode = document.createElement("div")
imageNode.innerHTML = div_str
imageNode.getElementsByClassName("zhihu-image")[0].hidden = true
document.body.appendChild(imageNode)


const loadImg = () => {
    let node = document.getElementsByClassName("zhihu-image-inner") [0]let nodeHidden = document.getElementsByClassName("zhihu-image")[0]
    console.log(node.hidden)
    if (nodeHidden.hidden === true) {
        nodeHidden.hidden = false
        console.log(node)
        images = document.querySelectorAll("span > figure > span > div")
        console.log(images)
        for(i = 0; i < images.length; i++) {
            let img = document.createElement("img")
            img.src = images[i].dataset.src
            img.className = "image"
            node.appendChild(img)
        }
    } else {
        nodeHidden.hidden = true}}Copy the code

This is the complete code for Content-script.js, CSS see github at the end of the article.

That’s it. Now you can write your own extension. Refer to the application of background property without page see communication, please check the official documentation.

WeChat: youquwen1226 lot: https://github.com/yunshuipiao/zhihu-image-chrome-extension