今天偶然看到 用技術(shù)方式炸魚 很感興趣低飒。一則最近也在看web的東西，二則前段時間scrapy爬取的圖片不是很方便去查看懂盐。因此決定決定照葫蘆畫瓢褥赊，嘗試著從零寫一個chrome 擴展。
參考資料
網(wǎng)上這方面的資料還挺多莉恼，我參考的是：https://github.com/sxei/chrome-plugin-demo
從零開始怎么去寫擴展拌喉，看完基本上可以完成一個簡單的擴展速那，其余自定義的地方需要一點點時間研究。
擴展演示：
使用步驟：
- 安裝擴展：打開chrome擴展頁尿背， 將擴展包（下載地址）解壓并拖到擴展頁安裝端仰，
image.png
右上角出現(xiàn)孔雀圖標(biāo)，安裝成功田藐。 - 繼續(xù)上次的福利荔烧，如何拍好私房照。
打開上述頁面汽久，左上角出現(xiàn)圖標(biāo)開關(guān)鹤竭。點擊即可查看，再次點擊即可關(guān)閉景醇。
image.png - 注意：由于下拉刷新的緣故臀稚，網(wǎng)頁不會一次返回本答案的全部圖片。
一次加載的圖片看完三痰，可手動下拉刷新吧寺，點擊圖標(biāo)繼續(xù)瀏覽圖片。
image.png
開發(fā)步驟：
看完上面的鏈接散劫，大概知道擴展的本目錄結(jié)構(gòu)稚机，我的如下：
image.png
最重要的文件：
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"
},
// 會一直常駐的后臺js或者頁面
"background": {
// 2種指定方式，如果指定JS颜凯，那么會自動生成一個背景頁
"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"
}
},
// 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
"web_accessible_resources": [
"js/inject.js",
"img/ic_launcher.png"
]
}
對照另一個文件即可看懂仗扬。
下面是content_script.js文件：
擴展比較簡單症概，思路就是在body插入一個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", () => {
// 點擊事件
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)在可以編寫自己的擴展了。
涉及到不用頁面見通信语盈，background屬性的應(yīng)用舱馅，請查看官方文檔。
微信：youquwen1226
github: https://github.com/yunshuipiao/zhihu-image-chrome-extension
