今天偶然看到 用技術(shù)方式炸魚 很感興趣。一則最近也在看web的東西，二則前段時(shí)間scrapy爬取的圖片不是很方便去查看。因此決定決定照葫蘆畫瓢，嘗試著從零寫一個(gè)chrome 擴(kuò)展。

參考資料

網(wǎng)上這方面的資料還挺多，我參考的是：https://github.com/sxei/chrome-plugin-demo
從零開始怎么去寫擴(kuò)展，看完基本上可以完成一個(gè)簡(jiǎn)單的擴(kuò)展，其余自定義的地方需要一點(diǎn)點(diǎn)時(shí)間研究。

擴(kuò)展演示：

使用步驟：

1. 安裝擴(kuò)展：打開chrome擴(kuò)展頁(yè)， 將擴(kuò)展包（下載地址）解壓并拖到擴(kuò)展頁(yè)安裝，
   
   image.png
   
   右上角出現(xiàn)孔雀圖標(biāo)，安裝成功。
2. 繼續(xù)上次的福利，如何拍好私房照。
   打開上述頁(yè)面，左上角出現(xiàn)圖標(biāo)開關(guān)。點(diǎn)擊即可查看，再次點(diǎn)擊即可關(guān)閉。
   
   image.png
3. 注意：由于下拉刷新的緣故，網(wǎng)頁(yè)不會(huì)一次返回本答案的全部圖片。
   一次加載的圖片看完，可手動(dòng)下拉刷新，點(diǎn)擊圖標(biāo)繼續(xù)瀏覽圖片。

image.png

開發(fā)步驟：

看完上面的鏈接，大概知道擴(kuò)展的本目錄結(jié)構(gòu)，我的如下：

image.png

{
  "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"
  },
  // 會(huì)一直常駐的后臺(tái)js或者頁(yè)面
  "background": {
    // 2種指定方式，如果指定JS，那么會(huì)自動(dòng)生成一個(gè)背景頁(yè)
    "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"
    }
  },
  // 普通頁(yè)面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
  "web_accessible_resources": [
    "js/inject.js",
    "img/ic_launcher.png"
  ]
}

對(duì)照另一個(gè)文件即可看懂。

下面是content_script.js文件：
擴(kuò)展比較簡(jiǎn)單，思路就是在body插入一個(gè)div元素，里面放置圖片，形成列表。

//操作document
let div_str = '<div class="zhihu-image">\n' +
    '            <div class="zhihu-image-inner"></div>\n' +
    '        </div>'

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", () => {
    // 點(diǎn)擊事件
    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

    }
}

這是content-script.js全部代碼，css見文末github。

全部完成，現(xiàn)在可以編寫自己的擴(kuò)展了。
涉及到不用頁(yè)面見通信，background屬性的應(yīng)用，請(qǐng)查看官方文檔。

微信：youquwen1226
github: https://github.com/yunshuipiao/zhihu-image-chrome-extension