【自作Chrome拡張機能公開】 気になるリンクを開きまくって、後でまとめて確認したい

# はじめに
ネットで調べ物をするとき、

1. 気になるリンクをとりあえず全部開く。  
1. 後でまとめて確認。  

をする人用のブラウザ拡張機能です。Chrome/Edge用とFirefox用があります。  

# ブラウザ拡張機能

## Google検索結果のリンクを新しいタブで開く
**New tab from search results**  ([Chrome/Edge&#129133;](https://chromewebstore.google.com/detail/ihkdodgomjaaglplbpkjaphjlahfiihn) / [Firefox&#129133;](https://addons.mozilla.org/ja/firefox/addon/new-tab-from-search-results/))  
* [設定変更](https://gift-by-gifted.com/open-chrome-search-results-in-new-tab/)なしでGoogle検索結果のリンクを新しいタブで開きます。  

![newtab.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193449/797976a8-af7a-9a71-1755-e0e2e92c5aee.gif)  

## 一時的にリンクを新しいタブで開けるようにする
**Double-click to page lock**  ([Chrome/Edge&#129133;](https://chromewebstore.google.com/detail/gjlolepdgcfnhdmmbmjhpencplafagpe) / [Firefox&#129133;](https://addons.mozilla.org/ja/firefox/addon/double-click-to-page-lock/))  

* ウェブページの余白をダブルクリックすると、ロック状態が切り替わります。  
* ロック中はリンクを新しいタブで開きます。  

![double.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3193449/f7848add-3d4a-8af0-b9c5-73399cfecfcb.gif)  

## Yahooニュースを新しいタブで開く
**New tab from YJNews**  ([Chrome/Edge&#129133;](https://chromewebstore.google.com/detail/aamnngpjfoliiejmoooklmcdmpbegkaa) / [Firefox&#129133;](https://addons.mozilla.org/ja/firefox/addon/new-tab-from-yjnews/))  
* Yahoo! JAPANトップページ上部にあるピックアップニュースのリンクを新しいタブで開きます。  

# 参考URL

## リファレンス

全般
* [拡張機能 / リファレンス  |  Reference  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/reference?hl=ja)  

ユーザーインターフェイス  
* [ユーザーインターフェイス - Mozilla | MDN](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface)  

manifest.json  
* [manifest.json - Mozilla | MDN](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json)  
* [マニフェスト ファイル形式  |  Manifest  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja)  

権限付与  
* [権限を宣言する  |  Extensions  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions?hl=ja)  
* [「activeTab」権限  |  Extensions  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/develop/concepts/activeTab?hl=ja)  

メッセージ  
* [メッセージ受け渡し  |  Extensions  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ja)  

## 作成

とりあえず作成。`action`の`default_popup`を利用してツールバーのアイコンクリック時にポップアップを表示させます。  
* [拡張機能のチュートリアルを作成する(パート 1) - Microsoft Edge Developer documentation | Microsoft Learn](https://learn.microsoft.com/ja-jp/microsoft-edge/extensions-chromium/getting-started/part1-simple-extension?tabs=v3)  
* [拡張機能のチュートリアルを作成する(パート 2) - Microsoft Edge Developer documentation | Microsoft Learn](https://learn.microsoft.com/ja-jp/microsoft-edge/extensions-chromium/getting-started/part2-content-scripts?tabs=v3)  
* [chrome.action  |  API  |  Chrome for Developers](https://developer.chrome.com/docs/extensions/reference/api/action?hl=ja#examples)  

:::note warn
`action`の`default_popup`を利用すると、`chrome.action.onClicked`が有効になりません。`chrome.action.onClicked`を利用する場合は`action`の`default_popup`を設定しないようにします。
:::

全般  
* [はじめての Chrome 拡張 最小構成ハンズオン #JavaScript - Qiita](https://qiita.com/punkshiraishi/items/5eca74202f6445025650)  
* [Chrome拡張の開発方法まとめ　その1：概念編 #JavaScript - Qiita](https://qiita.com/k7a/items/26d7a22233ecdf48fed8)  

プライバシーポリシー
* [Updated Privacy Policy & Secure Handling Requirements  |  Chrome Web Store - Program Policies  |  Chrome for Developers](https://developer.chrome.com/docs/webstore/program-policies/user-data-faq)  

移植  
* [Firefox に乗り換えよう！ 〜拡張機能を移行する〜 #JavaScript - Qiita](https://qiita.com/Chippppp/items/098c39479a98f1caa6da)  
* [Chrome 拡張機能を Microsoft Edge に移植する - Microsoft Edge Developer documentation | Microsoft Learn](https://learn.microsoft.com/ja-jp/microsoft-edge/extensions-chromium/developer-guide/port-chrome-extension)  
* [google chrome - Manifest v3 background scripts/service worker on Firefox - Stack Overflow](https://stackoverflow.com/questions/75043889/manifest-v3-background-scripts-service-worker-on-firefox)  
* [Manifest Version 3 background.Service_Worker is currently disabled · Issue #2532 · mozilla/web-ext · GitHub](https://github.com/mozilla/web-ext/issues/2532)  
* [background - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background#browser_compatibility)  

多言語対応  
* [Chrome拡張の作り方 26 多言語対応 - YouTube](https://www.youtube.com/watch?v=nPINKLWG-y0)  
* [Chrome拡張機能の開発入門（国際化対応編）](https://www.tackn.jp/post-3824.html)  

## 動作確認

Chrome  
* [自作Chrome拡張機能をテストする方法](https://note.affi-sapo-sv.com/chrome-extent-test.php)  

Firefox  
* [自作Firefox拡張機能をテストする方法](https://note.affi-sapo-sv.com/firefox-extent-test.php)  

:::note warn
* 再読み込みした拡張機能をページに反映するにはページのリロードが必要です。  
* エラーがある場合、エラー表示がでます。エラーを削除するにはごみ箱アイコンを押します。再読み込みしただけでは消えません。  
:::

## 申請

申請全般  
* [クロスブラウザなブラウザ拡張を開発・審査・公開するまで【Chrome拡張】 - Qiita](https://qiita.com/yamadashy/items/1c2c5d9fc766939a1851)  

Googleアカウント作成/申請  
* [Chrome拡張機能の申請手順 #JavaScript - Qiita](https://qiita.com/sasao3/items/0606b67da01948ae58b7)  
* [Chrome拡張機能のストア公開手順を実例とスクショ付きでまとめました #chrome-extension - Qiita](https://qiita.com/noratora/items/59811a5c7054bee966aa)  

Firefoxアカウント作成/申請  
* [開発者センター :: Firefox向けアドオン](https://addons.mozilla.org/ja/developers/)  
* [Firefoxのアドオン開発について(配布編) | 森林ソフト](https://forest-soft.xyz/blog/detail?id=18)  

## アップデート  

Google  
* [公開したChrome拡張機能のアップデート手順](https://zenn.dev/eetann/articles/2021-06-11-how-to-update-chrome-extension)  

Firefox  
* アップデートしたいアドオンを選択 → 左側の「新バージョンをアップロード」を選択

## その他

二要素認証（2FA）
* [二要素認証と二段階認証の違いを理解していますか？ | サイバーセキュリティ情報局](https://eset-info.canon-its.jp/malware_info/special/detail/210311.html)  
* [あなたのアカウントを守る、2段階認証アプリ5選 | ギズモード・ジャパン](https://www.gizmodo.jp/2020/01/authenticator-apps.html)  
* [時間ベースのワンタイムパスワードとは（TOTP） – Keeper](https://www.keepersecurity.com/ja_JP/resources/glossary/what-is-a-time-based-one-time-password/)  
* [「Google認証システム」がアカウント同期に　機種変が気楽に - ITmedia NEWS](https://www.itmedia.co.jp/news/articles/2304/25/news080.html)  
* [物理セキュリティキーとは？その仕組みやメリットデメリットについて徹底解説｜サイバーセキュリティ.com](https://cybersecurity-jp.com/security-measures/33900)  
* [グーグルが物理的な認証キーの新バージョン、「パスキー」を保存してPCを守るデバイスへと進化 | WIRED.jp](https://wired.jp/article/google-titan-security-key-passkeys/)  
* [パスキーとは　FIDO認証との違い、3つのメリットと課題 - WOR(L)D ワード｜大和総研の用語解説サイト](https://www.dir.co.jp/world/entry/passkey)  

Google rand Resource Center  
* [GoogleやYouTubeなどのロゴを使用する時のガイドラインとダウンロード・リンク集まとめ | nemuu.net](https://nemuu.net/blog-web/1493/)  
* [Brand Resource Center](https://about.google/brand-resource-center/?hl=ja)  
* [Brand Resource Center | Products and Services - Search Guidelines](https://about.google/brand-resource-center/products-and-services/search-guidelines/)  
* [Brand Resource Center | Guidance](https://about.google/brand-resource-center/guidance/)  
* [Brand Resource Center | Trademark list](https://about.google/brand-resource-center/rules/)  

2次元回転座標系  
* [2次元回転座標系 | 高校物理の備忘録](https://physnotes.jp/mechanics/2d_rot_cor/)