Chrome拡張を作る - teamlab-frontend

Chrome拡張を作る

rescrapped from /silloi-talks/Chrome拡張を作る

非FEネタですが最近こういうのも書きました

Yves Hilpisch『Pythonによるファイナンス第2版　データ駆動型アプローチに向けて』まとめ

おしながき

Chrome拡張とは

構成

世界観

動く仕組み

実際のコード

ハンズオン

参考にした記事

Chrome拡張の開発方法まとめ　その1：概念編

Chrome Extension の作り方 (最終話: メッセージパッシング)

Chrome拡張とは

https://clockify.me/blog/wp-content/uploads/2018/05/chrome.png

Chrome上で動くアプリケーション

Firefoxでは「アドオン」

HTMLとCSSとJavaScriptで記述されている

Webページと同じ

Manifest Fileと上記ファイルで構成されている

モジュールバンドラー等は不要

ZIPに詰めて審査に出すとストアに公開される

chrome://extensions/にフォルダをD&Dしても利用可能

世界観

Chrome拡張には三つの世界がある

Content Scripts

Browser Action / Page Action

Background Page / Event Page

これらの間を chrome.* API によってメッセージ形式でやりとりする

https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F314351%2F09cf9839-b3e1-96fd-c116-f24d39b313fa.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=8be473d579786a8e51b9a54d6a8eb613

構成

Manifest

https://www.bl.uk/learning/images/21cc/waves/manifesto.jpg

manifest.json で定義する

package.json みたいなもの

余談：綴りは本来 manifesto が正しい → マニフェスト#起源 - Wikipedia

重要なものは以下

content_scripts

ページ上の要素の取得や操作

browser_action および page_action

右上のアイコンから行う処理

background

ページの裏で動くスクリプト

permissions

tab や storage にアクセスする許可

code:manifest.json

{

"manifest_version": 2,

"name": "名前",

"description": "説明",

"version": "1.0",

"icons": {

"16": "icon_16.png",

"32": "icon_32.png",

"48": "icon_48.png",

"128": "icon_128.png"

"content_scripts": [{

"matches": ["http://*/*", "https://*/*" ],

"js": "content_scripts.js",

"css": "content_scripts.css"

}],

"browser_action": {

"default_icon": "icon_32.png",

"default_title": "拡張のボタン上で出るツールチップ",

"default_popup": "popup.html"

"background": {

"scripts": "background.js",

"persistent": false

"permissions": [

"tabs",

"background",

"http://*/*",

"https://*/*"

]

}

Content Scripts

https://ak7.picdn.net/shutterstock/videos/1016897617/thumb/1.jpg

"content_scripts": [{ }] 内で指定

"matches": [] で一致したページでスクリプトを自動的に実行

"css": [] で指定したCSSを当てたりできる

もちろん "js": [] で指定したJSも実行できる

Browser Action / Page Acgion

https://images-na.ssl-images-amazon.com/images/I/91tB3%2BV2RQL.jpg

"browser_action": {} または "page_action": {} 内で指定

ブラウザアクションはブラウザ全体に作用

ページが特定されているならページアクション

"default_title": "" でタイトルを指定

"default_popup": "" でHTMLのパスを指定

Event Page / Background Page

https://ak5.picdn.net/shutterstock/videos/5359265/thumb/3.jpg

"background": {} 内で指定

Event Page（推奨）とBackground Page（非推奨）がある

バックグラウンドページはページを保持

イベントページはイベントが発生した時のみ

"persistent": false にするとイベントページが有効になる

permission

https://livedoor.blogimg.jp/uminokiokuhakobu/imgs/e/a/eaa7dae1.jpg

"permissions": [] で指定

スクリプトが有効となるChrome機能の対象

tabs、background、{URL}など

chrome.permissions

動く仕組み

https://pds.exblog.jp/pds/1/201512/17/79/d0061579_11173844.jpg

メッセージパッシング

先ほどの三つの世界はスコープを共有していない

ある世界で定義した変数を他の世界でそのまま参照できない

chrome.* APIを使ってメッセージ形式でやりとりする

senderやreceiverがいるSmalltalkっぽい世界観

Chrome Extension の作り方 (最終話: メッセージパッシング)

送り手（タブの場合）

code:sendMessage.js

chrome.tabs.sendMessage(/*送信先のタブid*/, /*送るオブジェクト*/, function(/*レスポンス*/){

/*レスポンスを受け取ったあとの処理*/

});

受け手

code:javascript

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

let response = { 'hoge': 'fuga' }

sendResponse(response);

});

みたいなやりとりを各々の世界間でする

https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F8612%2F4e7b2c88-6024-83f2-0475-f8b8616b9a14.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=376587952f466bf8fbcf7329473c3983

Vuexに馴染んでいれば理解しやすい？

実際のコード

人が作ったChrome拡張のコードを見てみよう

Capture Video Element Extension for Google Chrome

Chromeストア：Capture Video Element

Webサイト内のVideo要素をキャプチャしてGyazoにアップロードできる

経緯：ssig33 が video-capture 公開 → yuiseki が Gyazoハッカソンを突発開催

TJ.icon https://github.com/ThaddeusJiang/chrome-extension-github-gist-search

ハンズオン

簡単に始められるので触ってみよう

Chrome Extention Boilerplate React

Reactの便利なボイラープレート