堡政島

好幾次看到 Chrome extension 在內容頁面可以動態改變 dom , 

 

就想要來做個範例來玩一下 ,  下面我們將在 Gmail 頁面裡面新增一個按鈕 ,

 

並且執行簡單的 alert 動作 ,  讓大家也可以很快上手 , 

 

這是原始的 gmail 畫面 : 

 

 

接下來我們要建立一顆按鈕 , 並且執行我們想要的動作 , 如下圖 : 

 

 

一開始得下載範例 , 才能順利進行後續的操作 , 可至 Github  下載

 

1.  在 Chrome Extendsion 網址列輸入 chrome://extensions/

 

2.  載入未封裝擴充功能 , 並選取剛才所下載的檔案 , 指定 manifest.json 所在的路徑

 

3.  登入 gmail , 這時候應該會發現在工具列的部份多了一個按鈕 , 按下後會跑出字串 test  

 

 

* 若看官想要自己改 js 的話 , 可以直接修改 myscript . js , 或者直接在 manifest.json 裡面 content_scripts . js 部份置換成自己的 js

 

* 若發現按鈕並沒有出現 , 可能是變數 icon 抓不到 dom ,  因為 gmail 在不同的版面其 class 也有變化  ,

這時候我們可以自己來做 debug 的動作 ,  詳細步驟如下圖 :  

 

1. 選擇 source panel

2. 選擇 Content scripts tab

3. 選擇我們建立的 extendsion 名稱 , 在這裡是 Create button inside gmail

4. 接下來就像你在 chrome console 除錯一樣

 

 

 

myscript.js : 

 

我們一開始所抓的參數 icon 其實就是畫面上的重整按鈕 , 我們想讓新增的按鈕位置在它附近

 

$(document).ready(function(){
	var icon = $(".T-I.J-J5-Ji.nu.T-I-ax7.L3");
	var btn = $('Click Me!');
	btn.attr("data-tooltip", "my tooltip");
	btn.on("click", function() {
		alert('test');
	});
	icon.before(btn);
});