因為前段時間聽室友說chrome沒有拖拽選中文字自動搜尋的功能，於是我突發奇想，響應毛主席的號召，自己動手，豐衣足食，於是很自然地想到了chrome的外掛，花了一天時間瞭解了下chrome外掛的工作原理，並寫了下面這個簡單的外掛。有點遺憾的是這個外掛只能實現選中文字，鬆開滑鼠自動搜尋的功能。
這是成品：

效果圖：


好了，下面我結合自己的理解，以最簡單明瞭的方式帶大家寫一個自己的外掛：

• 首先你需要學過javascript和最簡單的html、css，然後才能上手下面的程式設計部分，和理解外掛的工作原理。如果英語好點也可以直接看chrome官方的api文件，當然得翻牆，這是作為程式設計師必備技能之一。當然英語不好可以直接看百度360已經翻譯過的文件，網上一搜一大把，這兒就不貼了。
• 一個簡單的外掛需要manifest.json、popup.html、popup.js、content.js、background.html、background.js、還有若干css檔案。當然，這些除了manifest.json都不是必須的，可以根據自己的需要刪減或增加。把這些檔案都放在同一個目錄下，待會生成擴充套件程式待用。
• manifest.json
  是這個擴充套件的宣告檔案，所有要用到的東西都需要在這個檔案中申明，做過android開發的都知道AndroidManifest.xml這個檔案，作用是一樣一樣的，下面是這個檔案的結構：
  
  結構第一部分是整個檔案最比不可少的部分，其中的description可以省略，其他三個不可以，特別注意第一個version是擴充套件的版本可以自定義，而第二個manifest_version是固定寫法，照寫就行。
  後面幾個部分看註釋和變數的名字應該很容易懂，後面幾個部分就是上面提到的非必需部分，可以根據需要增減。
  這上面所要寫到的幾個部分就分別對應上面提到的外掛需要用的檔案。
• popup.html && popup.js && popup.css
  學過html的應該知道這幾個檔案是一體的，都是用來組成一個完整靜態頁面的，而在擴充套件裡面的作用就是點選擴充套件圖示彈出的一個tip，上面可以顯示一些資訊或者一些簡單操作，不過要注意的是，這裡的popup.js只在彈出這個小視窗的時候起作用，一旦它關閉了，就失效了，在這個popup.html中保持的資料也丟失了，所以如果需要儲存資料就必須和後面要講到的後臺指令碼background.js結合才行。寫完這些後要在上面的json檔案中註冊一下，也就是上面的browser_action。
• content.js
  這個指令碼是在可以在開啟其他頁面的時候執行的，用google官方的手法就是注入其他頁面的指令碼，可以和其他頁面互動，完成諸如解析其他的DOM樹，響應其他頁面的Event等等動作，因為他的這些特性就決定了它的生命週期是和激發這個指令碼的頁面共生的，一旦關閉當前這個頁面，這個js也就失效了。下面是一個獲取頁面選中文字，並彈窗顯示的js：

setInterval(function getSelection(){
  if (window.getSelection().toString().length > 0) {
    window.getSelection().removeAllRanges();//取消選中文字
    alert("您選中的文字是：" + window.getSelection().toString());
  }
}, 3000);

同樣這個指令碼需要在json檔案中申明，也就是上面的content_scripts。需要注意裡面的引數：
*matches：對對應規則的網址進行響應；
js：需要引入的指令碼檔案；
run_as：執行的時機；
all_frames：響應的網頁框架層次*
- background.html && background.js
這個就是後臺指令碼，可以一直在後臺執行的頁面和script。他的生命週期是和瀏覽器同在的，只有關閉了瀏覽器或者禁用了這個外掛，他才會停止。不過它不像上面的content scripts一樣，他無法直接和頁面通訊互動，它可以和content scripts結合，從content scripts獲取頁面資料，進行響應，但這不在本篇文章的範疇，看到這裡已經基本瞭解chrome外掛原理的可以上網搜尋相關回答學習下。最後這個後臺指令碼同樣需要在上面的json檔案中註冊，即background中。
- permission
外掛需要用到的許可權，例如：taps、storage等等
好了一個簡單的chrome需要用到的就是這些了，可以邊看邊動手寫一個自己的外掛了。
由於本人水平有限，文章如有紕漏，請批評指正！
下載外掛體驗請戳這兒，DrogSearch