Google Chrome瀏覽器插件入門開發

時間 2019-11-08

原文原文鏈接

--1. 在html文件中引用js 文件javascript

--2.在Google Chrome中開發簡單插件html

1.首先，簡單說明一下在html 中引用js 文件：java

將kittenbook.html 和 kittenbook.js 文件放在相同的目錄下，兩個文件的內容以下：編程

<html>
  <body>
   <p> Hello,world</p>
   <script type="text/javascript" src="kittenbook.js"></script>
  </body>
</html>

var username = prompt('Hello, what \'s your name?');
document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>';

輸入name（此處輸入Sam），並點擊肯定；根據 kittenbook.js的配置，會出現以下所示：json

2.在Google Chrome 瀏覽器中開發插件 --- 此例爲，訪問百度主頁時，會出現問候語。瀏覽器

首先打開開發者模式 spa

新建一個manifest.json 文件，此處內容爲：插件

{
  "manifest_version": 2,
  "name" : "kittenbook",
  "description" : "Replace photos on Facebook with kittens",
  "version": "0.0.1.1",
  "content_scripts" :[
    {
      "matches" : ["*://www.baidu.com/*"],
      "js" : ["value.js" , "prompt.js"]
    }
  ]
   
}

value.js 和 prompt.js 的內容以下，這三個文件是放在同一個目錄下的。code

prompt.jshtm

var username = prompt('Hello, what \'s your name?');
//Option 1 ,use username/projectName/versionNumber/currentTime directly
document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>' +
                          '<p>' + projectName + ' ' + versionNumber + ' accessed on:' + currentTime + '<p>';

//Option w ,use object to store username/projectName/versionNumber/currentTime value 
//document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>' +
//                         '<p>' + kbValues.projectName + ' ' + kbValues.versionNumber + ' accessed on:' + kbValues.currentTime + '<p>';

value.js

var projectName = 'kittenbook';
var versionNumber = '1.0.2';
var currentDate = new Date();
var currentTime = currentDate.getFullYear() + '-' +
                  (currentDate.getMonth() + 1) + '-' + currentDate.getDate() + ' at ' + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
 
var kbValues = {
    projectName: projectName,
    versionNumber : versionNumber,
    currentTime : currentTime
};

manifest.json / prompt.js /value.js，準備好以後，使用Chrome瀏覽器，在擴展程序頁面，點擊「加載已解壓的擴展程序」加載 manifest.json 文件：

加載成功後，以下所示:

此時，在Chrome瀏覽器中輸入 www.baidu.com ,會彈出提示框：

輸入name,並點擊肯定，會看到以下頁面:

啓用這個插件後，會影響正常訪問百度主頁。開發完成後，在瀏覽器擴展程序頁面取消啓用插件便可。

---可參考《一路編程》 Steven Foote