iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 21

Chrome Extension 21 - Youtube 筆記功能 Part 2 - 建立一個區塊

先在畫面建立一個簡單的區塊

到 JQuery 網站下載檔案放到 lib資料夾底下
https://jquery.com/

修正 manifest.js 在 content_scripts加入 JQuery

  content_scripts: [{
    js: [ 'lib/jquery-3.3.1.min.js','js/inject.js' ],
    run_at: 'document_end',
    matches: ['https://www.youtube.com/*'],
    all_frames: true
  }],

然後,直接在 src\content\inject.js 寫入 div 的程式碼

var div = document.createElement( 'div' );
var btn = document.createElement( 'input' );
btn.id = "mybutton";
//append all elements
document.body.appendChild( div );
div.appendChild( btn );
//set attributes for div
div.id = 'myDiv';
div.style.position = 'fixed';
div.style.top = '75px';
div.style.right = '5px';

btn.type = 'button';
btn.value = '顯示視窗';
btn.style.position = 'absolute';
btn.style.top = '0px';
btn.style.right = '0px';
$('#mybutton').click(function(){
    alert('hello world');
});

打開 youtube 會顯示一個按鈕 :

https://ithelp.ithome.com.tw/upload/images/20181105/200942231njKtncPvV.png
按下去會顯示 Hello World
https://ithelp.ithome.com.tw/upload/images/20181105/20094223SuSt4xDvZJ.png

感謝收看 :)


上一篇
Chrome Extension 20 - Youtube 筆記功能 Part 1 - 取得影格時間與簡易筆記
下一篇
Chrome Extension 22 - Youtube 筆記功能 Part 3 改使用 vue 顯示
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言