Zenn
🏰

【簡単】好きなページに飛ぶだけのChrome拡張機能をつくる

2023/03/03に公開
Chrome
JavaScript
初心者
Chrome Extension
tech

作成するもの

好きなページに飛ぶだけのChrome拡張機能をつくる方法を紹介します！

Chrome拡張機能の作成
拡張機能の位置にブックマークが作れるということですね

作成手順

フォルダを作成

Chrome拡張機能のフォルダを作成します。

bookmark-button フォルダの中に以下を作りましょう。

  • background.js Chrome拡張機能の処理を書きます。
  • icon.png Chrome拡張機能のアイコンになります。
    • 今回使用したのはこれ。Chrome拡張機能のアイコン
  • manifest.json 基本情報を書きます。

Chrome拡張機能のファイル
これで準備完了！

基本情報を入力

作成するChrome拡張機能の基本情報を入力します。

manifest.json
{
  "name": "Bookmark dg4",
  "version": "1.0.0",
  "manifest_version": 3,

  "action": {
    "default_icon": "icon.png"
  },
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

ページ遷移の処理を書く

  • ページ遷移の処理を書きます。

    • 今回は、https://www.dgdgdgdg.com/ に飛ぶようにします。
background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: "https://www.dgdgdgdg.com" });
});

Chrome拡張機能をインストール

  • Chrome拡張機能ページ(chrome://extensions/)へ行ったら、右上にある「デベロッパーモード」をオンにしたあと「パッケージ化されていない拡張機能を読み込む」をクリック。

    Chrome拡張機能のインストール

  • 作成したフォルダを選択して、Chrome拡張機能をインストールします。

    フォルダ選択

  • ブラウザ右上の拡張機能マークをクリックし、ピン留めしておきます。

    ピン留め

  • これで、好きなページに飛ぶだけのChrome拡張機能が完成しました！

    Chrome拡張機能の作成
    スマートなブックマークだなあ

参考

最後までお読みいただきありがとうございます

この記事のいいねや SNS のフォローなど、励みになります！

  • Web

    dgdgdgdg についての基本情報はこちら！

  • Twitter

    • メイン

      基本的にこちらにいます

    • 豆知識

      毎平日更新。便利な OS の機能やソフトの情報、最新ニュースなどを投稿しています！

  • Instagram

    写真の作品を投稿しています

  • YouTube

    ドラムの演奏動画がほとんどです。たまに映像作品的なものも。

  • note

    技術的でない、日常的な記事はこちら！

GitHubで編集を提案

Discussion