ebisen blog..

はじめてのChrome拡張開発 - マークダウン用にリンクをコピーしたい

Chrome拡張Markdown

はじめてのChrome拡張開発

ちょっとした作業なんだけど何度も繰り返していると面倒な作業を効率化するためにChrome拡張がほしい場面が多々あるので，いっそ作ってみようとなりました．

今回は， Google Chromeで表示しているサイトのタイトルとURLを，マークダウン用に[title](https://hoge.com)の形式でクリップボードにコピーする拡張機能を作りました．

拡張機能としてまだ公開してませんが，ソースはGithubに挙げてあります

以下，作業ログを残します．

作業ログ

公式ドキュメントを確認

ひとまず次の公式ドキュメントを読みました．

とりあえずこれを参考にコードを書き始めました．

Refused to execute inline event handler because it violates the following Content Security Policy directive

上記のエラーが出ました．次の記事で解決しました．

ポップアップのhtmlファイルにインラインでJavaScriptのscriptを書くことは許されていないというエラーでした．.jsファイルに切り出してhtml側で<srcript src='hoge.js'>と読み込めばOKでした．

addEventListener('DOMContentLoaded')を追加

先程のJavaScriptのファイル内にonClickを指定しましたが，エラーになりました．原因は，DOMが読み込まれる前にスクリプトが走った結果，イベントを紐付けるDOMがないことが原因でした．

タイトルの通り，'DOMContentLoadedイベント時にonClickを紐付けることでDOMがある状態でスクリプトが走ってくれました．

表示中のタブの情報ではなくpopupの情報がコピーされる

表示中のタブのタイトルやURLをコピーしたいのに，ポップアップのタイトルとURLがコピーされてしまうということが置きました．以下の記事で解決しました．

ポップアップのhtmlファイル側にscriptを読み込んでいたことが原因でした．表示しているサイト内ではなく，ブラウザでスクリプトを走らせなきゃ行けないので，Service Worker側でスクリプトを走らせる必要がありました．

manifest.jsonの設定を変更し，スクリプトを修正して対応しました．

ショートカットキーが効かない

ショートカットキーを設定しましたが，スクリプトが動きませんでした．下記の記事で解決しました．

原因としては，一つ前のものと同じで，Service Worker側で走らせなければいけませんでした．

エンドポイントがない

Service Workerがメッセージを送ったのに，エンドポイントがないというエラーを吐きました．下記の記事で解決しました．

manifest.jsonでcontent_scriptsを指定する必要がありました．

  "content_scripts":[
    {
      "matches": ["<all_urls>"],
      "js":["script.js"],
      "run_at":"document_start"
    }
  ]

これでメッセージを受け取る側のエンドポイントがサイト表示時に立ち上がります．