Chrome拡張機能のススメ

Chrome拡張機能 開発のススメ

Chrome拡張機能とは Chromeの動作を 変えることができるもの

例 • Share on Twitter • Weblioポップアップ 英和辞典 • uBlock Origin • uBlacklist • Autopagerize for Chrome • Pastebin.com • Video Speed Controller • FireShot • User-Agent Switcher for Chrome • URL Shortener for Amazon

Share on Twitter

Weblioポップアップ英和辞典

開発 言語 JavaScript + HTML/CSS

開発 言語 JavaScript + HTML/CSS → Webサイトと同じ

できること Content: DOM(表示要素)を編集できる！ Browser/Page actions: (後述) ボタンなどを押してできる / 特定ページ内の特定の要素 Background: ずっと動いてる Option: オプションのためのページ

Browser/Page actions: 具体的には？ タブ ブックマーク 履歴 クリップボード

開発 ①はじめに – manifest.json { //必須 "manifest_version": 2, //manifestのバージョン（決められた値） "name": "extension", //拡張機能の名前 "version": "1.0", //拡張機能のバージョン（自分で付与して管理） //任意項目 "browser_action": { //browser actionの拡張機能を作る際の設定事項 "default_icon": { //アイコン "16": "icon16.png" //48×48,128×128もあると良い（Chromeストアなどに使われる） }, "default_popup": "popup.html" //アイコンクリックで表示するHTML } }

開発 ②例 – DOMの操作 manifest.json { "manifest_version": 2, "name": "いま表示されてる画面のDOMを操作する", "version": "1.0", "content_scripts": [ { "matches": ["http://example.com/"], "js": ["jquery-3.4.0.min.js", "content.js"] } ] } content.js $(function () { console.log("コンテントスクリプトだよ"); $("body").css("background-color", "orange"); });

開発 ②例 – 背景色を変えるメニュー

開発 ②例 – 背景色を変えるメニュー manifest.json { "manifest_version": 2, "name": "Event Pageの実験", "version": "1.0", "background": { "scripts": ["event.js"], "persistent": false }, "permissions": ["contextMenus", "activeTab"] }

開発 ②例 – 背景色を変えるメニュー event.js // 拡張機能がインストールされたときの処理 chrome.runtime.onInstalled.addListener(function () { // 親階層のメニューを生成 const parent_menu = chrome.contextMenus.create({ type: "normal", id: "parent", title: "背景色を変えるメニュー", }); //子階層のメニューを親(parent_menu)に追加 chrome.contextMenus.create({ id: "red", parentId: parent_menu, title: "赤色", }); chrome.contextMenus.create({ id: "blue", parentId: parent_menu, title: "青色", }); }); /** * メニューが選択されたときの処理 * 選択されたアイテムはこちらの関数の引数に入ってくる(今回は item) * menuItemIdでmenuのidが文字列で取得できる */ chrome.contextMenus.onClicked.addListener(function (item) { console.log("メニューがクリックされたよ"); // 選ばれたメニューのidが item.menuItemId で取得できる chrome.tabs.executeScript({ code: "document.body.style.backgroundColor =‘” + item.menuItemId + "'", }); });

開発 ③公式ドキュメントを見よう

開発 ④拡張機能を公開してみよう

まとめ – Chrome拡張機能の開発には • JavaScript + HTML/CSS • 公式ドキュメント • 入門用サイト

参考リンク • https://note.com/taraco123/n/n22268575b385?magazine_key=mebcf1de3449b • https://qiita.com/sakaimo/items/416f36db1aa982d8d00c

ご清聴ありがとうございました