作成者のレベル
私自身、Chrome Extensionを作るのは初めてです。
以前、Webサイトを一度作成したことがありますが、ほとんど初学者です。
ただ、Chrome Extensionは、沢山の人が作成しているため参考に出来るサイトが多く、初学者でも作りやすかったです。
そこで、参考にしたサイトのURL集を記載していきます。
作成中、ハマったことは別の記事で記載します。
作成したChrome Extensionで使った機能
作ったChrome Extensionは、Qiitaの記事を作成する時にMarkdownのリンクが連続で作成するものです。
(この記事を作成するのに使いました)
作成したChrome Extension、Markdown Links Createrは、コピーする度に新たに作成するリンクに加え、過去に作成したリンクを追記してクリップボードへコピーします。
過去にコピーしたリンクを追記してコピーするかどうかは、オプション画面で設定できます。
追記するリンクもオプション画面で整理できます。
よって、使った主な機能は以下になります。これらを中心にサイトを紹介します。
- Event Page
- Brower Action
- Option Page
- chrome.storage API
URL集
Chrome Extensionの開発に必要な概念
Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張機能の開発 その1-1：概要編 - Qiita
公式のサンプル集
Sample Extensions - Google Chrome
Manifest File
Manifest File Format - Google Chrome
Manifest Fileの書き方に困った時
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
Context Menu
chrome.contextMenus - Google Chrome
Context Menuのオプションの書き方に困った時
Chrome 拡張機能 ー コンテキストメニュー(ContextType/ItemType） - Qiita
実装方法の確認
Google Chrome Extensionを作ってみた-その7- ｜ DevelopersIO
try catch and ...release: コンテキストメニューなChrome拡張機能の作り方
Event Page
必要なときにロードされ、実行されるページ。
Manage Events with Background Scripts - Google Chrome
ChromeのEvent Pagesで実現する省メモリな拡張機能 | monolithic kernel
Chrome Extensionの種類
Browser Action
ブラウザ全体に作用するタイプで、Chromeの検索バー横にアイコンが表示される。
ポップアップを表示したりもできる。
chrome.browserAction - Google Chrome
Page Actions
特定のページでのみ作用するタイプ。
chrome.pageAction - Google Chrome
Override Pages
Chromeが提供するページを作成したHTMLで置き換えるタイプ。
Override Pages - Google Chrome
Option Page
ユーザーがChrome Extensionに関する設定を行うページ。
Give Users Options - Google Chrome
chrome.storage API
[Chrome Extensions（機能拡張）開発] localStorageを使って異なるスコープ間でデータのやり取りを行う方法 | maesblogよりlocalStorageも使えるのですがlocalStorageの場合、background.jsを使ってChrome ExtensionsとWebサイト間のデータのやり取りを行わなければなりません。
chrome.storage APIは、以下のメリットがあったのでこちらを採用しました。
- background.jsがなくても、Chrome ExtensionsとWebサイト間のデータがやり取りできる
- クッキーやキャッシュを削除しても、データが保持される
- データ変更時のコールバック関数を登録できる
chrome.storage - Google Chrome
chrome.storage APIの概要を知りたい
Chromeエクステンションを作ろう：ストレージ編 - Qiita
実装方法を知りたい
chrome.storageでchrome extension用のデータを保存・取得 | EasyRamble
chrome.storageの実態を確認したい
chrome.storage.localの場合は以下にあります(Windows)。
C:\Users{ユーザー名}\AppData\Local\Google\Chrome\User Data\Default\Local Extension Settings{拡張のID}
chrome.storageの実体の場所 - Qiita
デバック
デバックの仕方が分からないとき
Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】 - Qiita
権限の要求記載
権限の種類
Declare Permissions - Google Chrome
ユーザーに通知される権限
Declare Permissions and Warn Users - Google Chrome
権限設定の重要性について
ブラウザ拡張の権限でどこまで（悪いことを）できるのか？とその対策【デモあり】 - Qiita
作成したChrome Extensionは公開するため、権限の要求は必要最小限で済むようにしました。
"permissions": [
"tabs",
"contextMenus",
"storage"
]
私の作成したChrome Extensionの権限は、閲覧履歴の読み取り権限がありますが、これはtabsを追加したためです。
tabsがないと、ブラウザアイコンを押下した際にURLやページのタイトルをイベントハンドラーの引数から取ってこれなかったからです。
// ブラウザアイコンクリック時にページリンクをMarkdown形式でコピーするイベントハンドラの登録
chrome.browserAction.onClicked.addListener(createLink);
function createLink(info, tab) { // ブラウザアイコン押下時、info.urlやinfo.titleがundifined
let url;
if (info.mediaType === 'image') {
url = info.srcUrl;
} else {
url = info.linkUrl || info.pageUrl || info.url;
if (!url) {
if (tab)
url = tab.url;
}
}
let text = info.selectionText || info.title || url;
if (tab)
text = tab.title;
if (url && text)
saveLink('[' + text + '](' + url + ')');
}
Chromeストアへの公開方法
Publish in the Chrome Web Store - Google Chrome
その他
JavaScriptでクリップボードに文字をコピーする
クリップボードに文字をコピーするには、テキストを画面外に作って、クリップボードにコピーするだけです。
コピーした後は、テキストボックスを削除します。簡単。
// テキストエリアを作って値を入れる
let ta = document.createElement('textarea');
let st = ta.style;
st.position = 'fixed';
st.left = '-100%';
ta.value = text;
// 作成したテキストエリアをbody要素に追加
document.body.appendChild(ta);
// テキストエリアを選択
ta.select();
// クリップボードにコピー
let result = document.execCommand('copy');
// body要素から作成したテキストエリアを削除
document.body.removeChild(ta);