この度、Google Chromeの拡張機能を作りたくなりました。
初心者なため、内容が不十分かもしれませんが、よろしくお願い致します。
下記のページを参考に、ポップアップの表示と、ボタンクリックイベントまでは、作成することができました。
【TypeScriptで簡単にChrome Extensionを作る方法】
[https://qiita.com/Takumon/items/da2142cc06b243f83211]
現在のpopup.js
javascript
1/** 2 * Popup 3 */ 4import * as $ from 'jquery'; 5import Config from './common/config'; 6import Debug from './common/debug'; 7 8class Popup { 9 10 /** 11 * Configインスタンス 12 * @type {Config} 13 */ 14 config: Config; 15 16 /** 17 * Debugインスタンス 18 * @type {Config} 19 */ 20 debug: Debug; 21 22 /** 23 * コンストラクタ 24 */ 25 constructor(){ 26 this.config = new Config(); 27 this.debug = new Debug(); 28 } 29 30 /** 31 * 初期化処理 32 */ 33 init(): void { 34 var self = this; 35 self.debug.line('---init----'); 36 this.initPush(); 37 } 38 39 /** 40 * 初期化処理 41 * ボタンを押した時の処理 42 */ 43 initPush(): void { 44 var self = this; 45 46 $('#btn-push').click(function(){ 47 self.debug.print('clicked'); 48 49 //現在開いているページ 50 chrome.tabs.query({active: true, currentWindow: true}, tabs => { 51 var id:any = tabs[0].id; 52 alert('id: ' +id); 53 54 // 55 // ここで、現在開いているページのDOMを 56 // ゴニョゴニョしたい 57 // 58 }); 59 }); 60 } 61} 62 63var popup = new Popup(); 64popup.init();
現在、開いているタブの情報は取れました。
変数「document」をconsole.log()をしましたら、popup.htmlのDOMの情報でした。
上に記載してある通りに、
ゴニョゴニョしたいのは、現在開いているページのDOMになります。
初心者で、わかりにくい点があるかもしれませんが、助けて頂けますと嬉しいです。
どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー