ブックマークレットは便利だけれど、インストールが大変。そこで、Chrome拡張機能として作り直してみた。結果的には、2つのファイルを追加すれば実現できた。
「ボタンを押すとスクリプトを実行する」という動作にしたかったので、Page Action として作った。スクリプトを動作させたいページを開くと、アドレスバーの横にアイコンを表示する。そのアイコンをクリックすると、スクリプトを実行する。
(1) manifest.json を作る
ポイントは、permissions に、”tabs”と、スクリプトを注入するページのURLを記載する点。
URLはアスタリスク (*) を使ったパターンを記述することもできる。詳しくは Match Patterns を参照。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "manifest_version": 2, | |
| "name": "Name of this extension", | |
| "version": "0.1", // 新しい拡張を公開するたびに上げていく | |
| "description": "Description of this extension", | |
| "icons": { | |
| "128": "icon128.png" // chrome://extensions に表示されるアイコン。128×128 | |
| }, | |
| "page_action": { | |
| "default_icon": "icon128.png", // アドレスバーに表示されるアイコン。19×19, 38×38 を準備しておくべき？ | |
| "default_title": "Tooltip for the page action icon" | |
| }, | |
| "permissions": [ | |
| "tabs", | |
| "https://www.google.com/maps/preview" // スクリプトを実行したいURLを記載していく | |
| ], | |
| "background": { | |
| "scripts": ["background.js"] | |
| } | |
| } |
(2) background.js を作る
ポイントは2つ。
1. Page Action のアイコンを表示したいURLの正規表現を記述する。正規表現と、上記 (1) のアスタリスク記法は異なるので注意。
2. 実行したいスクリプト (ブックマークレット) のファイル名、ここでは execute.js を記述する。別ファイルにせずに、直接記述することもできる (file ではなく code にする)。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var urlRegExp = new RegExp('^https?://www.google.com/maps/preview'); // アドレスバーの横にアイコンを表示するときのURL正規表現 | |
| function showIcon(tabId, changeInfo, tab) { | |
| if (tab.url.match(urlRegExp)) { | |
| chrome.pageAction.show(tabId); | |
| } | |
| } | |
| chrome.tabs.onUpdated.addListener(showIcon); | |
| chrome.pageAction.onClicked.addListener(function(tab) { | |
| chrome.tabs.executeScript(tab.id, { | |
| "file": "execute.js" //実行したいスクリプトのファイル名 (execute.js) | |
| }, function () { | |
| if (chrome.runtime.lastError) { | |
| console.error(chrome.runtime.lastError.message); | |
| } | |
| }); | |
| }); |
ここまで準備ができれば、Chrome単体で拡張機能を作って試すことができる。ただ、簡単にインストールできるようにするためには、Chromeウェブストアで公開する必要がある。
(3) Chromeウェブストアで公開する
まだ公開していないので、できたら報告します。
ダッシュボードにアクセスして、拡張機能を登録。ポイントは2つ。
1. 開発者登録に $5 必要。一度払えば、ずっと使えるらしい。
2. ローカルのChromeで作った.crxではなく、素の zip で固めた .zip ファイルを登録する。Chromeウェブストア側で秘密鍵を発行して署名してくれるらしい。
参考：
@takatama_jp 