佐藤 あゆみ
佐藤 あゆみ

necco note

【公開終了しました】STUDIOユーザー向けのChrome拡張機能を制作&公開しました

  • Web Development

STUDIO 製のページを閲覧している時に、ワンクリックでそのページをデザインエディタや CMS で開ける Chrome 拡張機能「STUDIOで編集」を公開しました。
この拡張機能は、公開を終了しました。

事前に STUDIO にログインしており、さらに自分がメンバーやオーナーとして所属しているプロジェクトなら、どのプロジェクトでも開けます。

公開ページを閲覧中に気になるページがあったら、プラグインのアイコンクリック→「開く」で素早く編集を始められます!もちろん無料です。

Chrome機能機能を作ったきっかけ

自分が STUDIO で制作したページを眺めていて、ちょっと気になる部分を見つけて、すぐにそのページを編集したいと思っても、【 STUDIO のトップページからログイン】→【プロジェクトを一覧から探して開く】→【編集したいページをリストから選んで開く】の手順が必要でした。特に、階層が深いページを編集するとなると何度もクリックせねばならず、面倒に感じます。

この手順を簡略化したいと思い立ち、まずは公開ページからワンクリックで編集画面にアクセスできるブックマークレットを作りました。しかしながら、このブックマークレットを使うには、ブックマークレットのコード上で事前に STUDIO のプロジェクト ID を設定する必要があるうえに、CMS の動的ページには対応できませんでした。

これらの欠点を解消するには、ブックマークレット以上の機能を持たせられる何か…Chrome拡張機能にする必要がありました。これが私がChrome拡張機能を作ろうと思ったきっかけです。

Chrome拡張機能の作り方

Chrome拡張機能は、HTML、CSS、JavaScript、JSONファイルを利用して作ります。主に JavaScript を使って主要な機能を実装し、HTML や CSS で設定画面等をつくり、規定の様式の JSONファイルに拡張機能の情報を記述します。

それらをZIPファイルにまとめて Chrome ウェブストアにアップロードすれば一般に公開できます。

最低限の構成として、manifest.json と popup.html の2つのファイルがあれば拡張機能を作れます。manifest.json にプラグインの情報や構造、必要なアクセス権を記述し、popup.html に表示したい内容を記述します。

Chromeの拡張機能の設定画面で拡張機能ファイル一式が入ったフォルダを読み込めば、Chrome上で動作を確認できるようになります。シンプルですね。

スクリーンショット:フォルダの選択画面
ファイル一式の入ったフォルダを選択する
スクリーンショット:STUDIOで編集する拡張機能
Chrome拡張機能がインストールされた

作成にあたっては下記のページを参考にしました。

とほほのChrome拡張機能開発入門 – とほほのWWW入門

拡張機能の構成

  • 📁 _locales
    • 📁 en
      • messages.json – 英語翻訳ファイル
    • 📁 ja
      • messages.json – 日本語翻訳ファイル
  • manifest.json – 拡張機能の設定ファイル
  • content.js – STUDIO ページ内で実行するスクリプト
  • inject.js – Vue オブジェクトを取り出すスクリプト
  • popup.html – ポップアップウィンドウの内容
  • popup.js – ポップアップウィンドウ内で実行するスクリプト
  • input.css – Tailwind 入力用CSS
  • output.css – Tailwind 出力済CSS
  • tailwind.config.js – Tailwind 設定ファイル
  • icon.png – 拡張機能のアイコン

manifest.jsonにて、拡張機能全体の設定を行います。拡張機能名や、どのページでどのスクリプトを実行するのか、Chromeに対してどのような権限を要求するのかなどを記述していきます。
nameとdescriptionには多言語対応のためのkeyを設定しています。

{
  "name": "__MSG_Name__",
  "description": "__MSG_Description__",
  "version": "1.0",
  "manifest_version": 3,
  "default_locale": "en",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://*/*"
      ],
      "js": [
        "content.js"
      ],
      "css": [],
      "run_at": "document_end"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "inject.js"
      ],
      "matches": [
        "https://*/*"
      ],
      "extension_ids": []
    }
  ]
}

ポップアップウィンドウとは、Chrome 拡張機能アイコンをクリックした際に開く画面のことです。この画面内はHTML/CSS/JavaScriptで構成されており、それらのファイルを含めます。

Chrome 拡張機能アイコンをクリックした際に開く画面

また、Tailwind は、ユーティリティファーストな CSSフレームワークです。拡張機能を作成するにあたってはプレーンな CSS で装飾すればよく、不要なものですが、私個人としては「ないとツライ」ツールにあたるため、採用しています。CSS のクラス名を命名する必要もなく、HTML や JSX ソースコードの該当箇所から離れずにコーディングを完結できるため、重宝しています。
(リリース前のバージョンでは複数の画面を用意していたため、今よりもCSSの記述量が多かったのです)

編集画面を開くしくみ

ページやCMSコンテンツの編集画面をSTUDIOで開くためには、それらのページ固有のURLを生成する必要があります。そして、URLを生成するためには、プロジェクト ID や CMS 固有のモデル ID の情報が必要です。

これらの情報をページ内から得られないか、STUDIO のHTMLソースコードを眺めていると、ページ内のwindow.NUXT=で始まる JavaScript コードのなかにそれらしき情報が入っているのを見つけました。

スクリーンショット:Devtoolsにてwindow.NUXT=で始まるスクリプトが表示されている
STUDIOプロジェクトに関連する情報が書き出されている

STUDIO は Nuxt.js (Vue) で作られており、ページを生成するためにセットしたプロパティがページ内に出力されるようです。これらの値を利用して、編集ページ固有のURLを推定し、生成することにしました。

拡張機能では以下の処理を行っています。

  1. 現在開いているページの情報を取得するために、一度リロードする
  2. プロジェクト ID などの情報をページ内から取得する
  3. 取得した情報をもとに STUDIO 編集画面のURLを生成する
  4. URLを新しいウィンドウで開く

Nuxt (Vue) の情報を Chrome 拡張から取得するにあたっては、下記のページを参考にしました。

VueやVuexのデータを操作するChrome拡張の作り方

Chrome拡張機能を多言語対応するには

Chrome 拡張機能の他言語対応(ローカライズ)にあたっては、拡張機能のマニフェストファイルの翻訳と、拡張機能内のオプション設定ページなどで使用するファイルの翻訳対応が必要になります。

マニフェストファイルやJavaScriptの翻訳対応

拡張機能のルート直下に_locales/フォルダを置き、その中に言語別のフォルダjaなどを作り、messages.jsonを設置します。詳しくは下記のページをご覧ください。

Chrome拡張機能の開発入門(国際化対応編)

HTMLの翻訳対応

上でご紹介した記事にもある通り、JavaScript 内の文言翻訳は chrome.i18n APIで行えますが、ポップアップウィンドウ用のHTMLファイルのローカライズには対応していないため、なんらかの別の手段を使って翻訳表示に対応することになります。

今回は、下記のページを参考に、データ属性を使って HTML 内に翻訳済みのメッセージを表示しました。

Google Chrome拡張機能: HTMLの国際化
カスタムの Chrome アプリと拡張機能を作成して公開する

ストアへの拡張機能登録方法

拡張機能を使うだけであればこれまでの手順で完了となりますが、さらに Chrome ウェブストアで公開すれば、自分以外のユーザーに拡張機能を使ってもらえます。

Chrome ウェブストアで拡張機能を公開するためには、デベロッパー登録が必要です。Chrome ウェブストアのデベロッパー登録ページから登録できます。登録するためには、一回のみ5ドルの登録料を支払う必要があります。

拡張機能を登録申請する

拡張機能を申請する際には、公開する範囲を選べます。 一般公開、限定公開、非公開、グループ公開から選べ、今回は一般公開に設定しました。

プラグインが複数言語に対応している場合は、Chrome ストア上でも複数言語のスクリーンショットや説明文を用意して申請し、公開できます。

Googleのモバイル向けプラットフォームである Play Console と比較すると、金銭的にも、入力の手間を比べても、手軽に公開できると感じました。

スクリーンショット:ストアの掲載情報の入力ページ(日本語用)
スクリーンショット:ストアの掲載情報の入力ページ(英語用)

申請の翌日に審査結果が届きました。

申請時に、今回の拡張機能の動作には不要だったscripting権限をリクエストしており、それをコード上で使用していなかったため、不承認となっていました。きちんとコードの内容が精査されていることを少し意外に思いました。
指摘を受けて、scripting権限を使わずにhost権限のみを必要とするものとして申請内容を修正しました。

スクリーンショット:権限の入力画面

再度申請したところ、翌日に審査が通ってストアに公開されました。

さいごに

今回作成したプラグインは、STUDIO の仕様が変わると動作しなくなる可能性があります。また、現時点にて、STUDIO の仕様上、プレビューページでは動作しないことが分かっています。非公式プラグインの開発にはこのようなリスクや制約がありますが、趣味の範囲で挑戦するぶんには、ちょうどいい規模だと感じます。

初めての試みでしたが、作ろうと思い立ってから1日で完成できましたので、とても手軽でした。アイデアとちょっとしたコーディング知識があれば作れることが分かり、今後も何かに役立つようなプラグインを開発していきたいと感じました。

Chrome ウェブストアには簡易的なアナリティクス機能もあり、インストールしたユーザーの情報も統計として閲覧できるようになっています。累計で105インストールと、拡張機能のなかでは少ないインストール数とは思います。しかしながら、元々自分で使いたくて作った機能ですし、それが誰かの役に立つ(かもしれない)のであれば、これより嬉しいことはありません。

スクリーンショット:インストール数の合計が105と表示されている
Chrome ウェブストアのアナリティクス画面

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • アシスタントデザイナー
  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア
  • エディター・ライター

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

株式会社necco ダウンロード資料へのバナー画像

(2024年3月時点)

佐藤 あゆみ

佐藤 あゆみ

Ayumi Sato

ニューヨーク生まれ。まもなく東京に移住し、1994年から2年間のオーストラリアでの生活を経て、ふたたび東京へ戻り、今も暮らす。1997年頃より趣味としてWeb制作を始め、以後も独学で学ぶ。 音楽専門学校中退後、音楽活動での成功を夢見ながら、PCパーツショップやバイク輸出入会社、楽器店など、掛け持ち含めて計20以上(?)の業種でアルバイトを重ね、ECサイトの運営管理や自社サーバの管理、プログラミングなども学ぶ。音楽活動を展開する中で、集客やフライヤー制作、プロモーションビデオ制作を行い、周辺技術を身につけるきっかけとなるも、2011年頃に区切りをつけ、ウェブ制作で生計を立てることを決意。その後は画廊やウェブ制作会社などで勤め、2014〜2022年まではフリーランスとして活動。2018年より、CSS NiteやBAU-YAなどのイベント、スクールにて登壇。2019年に「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を出版。 趣味はガジェットいじり&新しいサービスを試すこと。

SHARE

Other Note

necco note
neccoが制作したCMS導入実績まとめ記事のアイキャッチ画像

neccoが制作したCMS導入実績まとめ【事例紹介】