成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

開發(fā)一個(gè)用于屏蔽知乎網(wǎng)內(nèi)容的Chrome擴(kuò)展

desdik / 1665人閱讀

摘要：我的擴(kuò)展是專門用于知乎網(wǎng)站的，因此選擇了來處理。在文件中進(jìn)行如下設(shè)置知乎屏蔽擴(kuò)展在中指定域可以使擴(kuò)展常駐后臺(tái)。由于注入到了知乎頁面，而存放在擴(kuò)展的域下，要在中獲得關(guān)鍵詞的值，就必須用到頁面中的通信。

本文原發(fā)在我的博客。

前段時(shí)間電影《瘋狂動(dòng)物城》上映了，然后我的知乎首頁就被它刷屏了。雖然我對(duì)這部電影沒有任何意見，但作為一個(gè)還沒去電影院看過的人來說，每看到相關(guān)問題一次都是無情的劇透，于是我毅然屏蔽了“瘋狂動(dòng)物園”這個(gè)話題。本以為問題解決了，但是接下來我又被迫看到這個(gè)問題：

問題上添加的五個(gè)話題無一命中，我又被劇透了一臉。算了，既然知乎的屏蔽規(guī)則靠不住，那就自己動(dòng)手吧。這樣我的Chrome瀏覽器擴(kuò)展——ZhihuFilter就誕生了，點(diǎn)擊這里查看Github上的項(xiàng)目。

擴(kuò)展功能

其實(shí)擴(kuò)展的功能很簡單，當(dāng)打開知乎首頁后，擴(kuò)展會(huì)依次檢查你的屏蔽關(guān)鍵詞列表是否出現(xiàn)在了某一個(gè)答案中，如果出現(xiàn)了，就會(huì)把這個(gè)答案隱藏，取而代之的是提示信息和一個(gè)展開答案的按鈕。效果如下圖所示：

你可以點(diǎn)擊圖中的按鈕來查看答案，之后可以選擇再次隱藏或展開。

當(dāng)你安裝了擴(kuò)展后，會(huì)在地址欄的右側(cè)顯示出圖標(biāo)

點(diǎn)擊圖標(biāo)后，將會(huì)出現(xiàn)設(shè)置屏蔽詞的界面

你可以在這個(gè)頁面中設(shè)置你想屏蔽的詞語。

關(guān)于Chrome擴(kuò)展的開發(fā)

關(guān)于Chrome擴(kuò)展開發(fā)的內(nèi)容，可以查看Google的官方文檔或者是這個(gè)教程。

一個(gè)應(yīng)用（擴(kuò)展）其實(shí)是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。

開發(fā)擴(kuò)展的時(shí)候，必不可少的是一個(gè)manifest.json文件，這是一個(gè)配置文件，會(huì)告訴Chrome你的擴(kuò)展中包含了哪些內(nèi)容。manifest.json中包含擴(kuò)展的名字、版本及各種資源文件（如圖標(biāo)、顯示頁面等）的鏈接。

我的擴(kuò)展的manifest.json文件

Browser_action 和 page_action

Browser_action和page_action是擴(kuò)展的兩種類型，它們很相似，主要的區(qū)別在于browser_action可以應(yīng)用于所有的頁面，而page_action只能在你設(shè)定的幾個(gè)特定網(wǎng)站內(nèi)使用。我的擴(kuò)展是專門用于知乎網(wǎng)站的，因此選擇了page_action來處理。

按照Google的文檔描述，兩者還有一個(gè)區(qū)別：browser_action的圖標(biāo)顯示在地址欄的外部，page_action的圖標(biāo)顯示在地址欄內(nèi)部。但是，在這里的討論中，似乎新版本的Chrome瀏覽器中已經(jīng)將兩者都顯示在了地址欄的外側(cè)，不過page_action的圖標(biāo)只有在打開特定的網(wǎng)站時(shí)才不會(huì)顯示為灰色。

在manifest.json文件中進(jìn)行如下設(shè)置：

"page_action": {
  "default_icon": "images/icon.png",
  "default_title": "知乎屏蔽擴(kuò)展"
},
background.js 
在Manifest中指定background域可以使擴(kuò)展常駐后臺(tái)。background可以包含三種屬性，分別是scripts、page和persistent。

我在擴(kuò)展中只用到了scripts：

"background": {
  "scripts": ["js/jquery-2.2.1.js","js/background.js"]
},

這樣就會(huì)自動(dòng)生成一個(gè)包含了列出的腳本文件的后臺(tái)頁面。

在我的background.js文件中有如下內(nèi)容：

    // 當(dāng)網(wǎng)址改變的時(shí)候，判斷當(dāng)前的頁面是否是知乎
    // 如果是的話，就顯示出圖標(biāo)，并設(shè)置它的彈出頁面
    chrome.tabs.onUpdated.addListener(function(id, info, tab){
        if (tab.url.toLowerCase().indexOf("zhihu.com") > -1){
            chrome.pageAction.show(id);
            chrome.pageAction.setPopup({
                tabId: id,
                popup: "popup.html"
            });
        }
    });

background.js文件中還有一個(gè)用于和content_script進(jìn)行通信的監(jiān)聽器。

參考資料：
Google的Backgorund Pages文檔
另一個(gè)教程
Content Scripts 
Content scripts是在Web頁面內(nèi)運(yùn)行的javascript腳本。通過使用標(biāo)準(zhǔn)的DOM，它們可以獲取瀏覽器所訪問頁面的詳細(xì)信息，并可以修改這些信息。

在manifest.json文件中進(jìn)行設(shè)置：

"content_scripts": [
{
  "matches": ["*://*.zhihu.com/*"],
  "js": ["js/jquery-2.2.1.js", "js/content_script.js"]
}

在打開匹配的網(wǎng)站時(shí)，列出的js文件會(huì)被注入頁面，這樣就可以獲得瀏覽器所訪問的web頁面的詳細(xì)信息，并可以對(duì)頁面做出修改。雖然content script和頁面共享了DOM結(jié)構(gòu)，但不能訪問該頁面或其它c(diǎn)ontent script中定義的函數(shù)和變量，這樣就避免了相同的函數(shù)或變量名稱的干擾。

我的擴(kuò)展的主要功能就是在content_script.js中完成的，在該腳本中通過對(duì)頁面的DOM進(jìn)行操作來實(shí)現(xiàn)功能。

擴(kuò)展功能的實(shí)現(xiàn) 對(duì)知乎首頁進(jìn)行分析

查看一下知乎首頁的源代碼，所有的答案內(nèi)容是放在一個(gè)id=js-home-feed-list的div中的，結(jié)構(gòu)大致如下：

而在答案部分中，又分為摘要和完整的答案。

    

        …