数分でChrome拡張機能の展開を自動化！

下記は https://gokatz.me/blog/automate-your-chrome-extension-deployment-in-minutes/ の翻訳です。

Chrome拡張機能の作成は楽しいです！しかし、手動によるプロセスがほとんど必要ないため、展開は少し面倒です。この投稿では、Chrome拡張機能のビルド、アップロード、公開プロセスを数分で自動化する方法を紹介します🔥🔥

まず最初に、私が物事を自動化するために使用する次のNPMパッケージの作者に感謝します。

始めましょう。デプロイプロセスを自動化するのに最適な場所の1つは、CI / CDパイプラインです。 gitlab-ci.ymlファイルの助けを借りて、GitLabの組み込みCI環境を使用してデモを行います。 Travis、Circle-CIなどのGithubのCIサービスにも同じことが適用できます。

Chrome拡張機能の作成者は、次のリリース手順を知っているかもしれません。

拡張フォルダを圧縮する（マニフェストバージョンをバンプするようにしてください）
Chromeウェブストアにアップロードしています。
アップロードされた拡張機能のバージョンを公開します。

nodeを使用して自動化スクリプトをコーディングします。そこで、ルートディレクトリにノードファイル（deploy.js）を作成し、 CI環境からgitlab-ci.ymlfile を使用して呼び出します。

拡張フォルダを圧縮：

zip-folderパッケージを使用すると、 zipを実行するだけです！

npm install --save zip-folder

const zipFolder = require('zip-folder');
let folderName = 'path/to/folder'; 
// I too hate placeholders! will be attaching a sample file at the end of this writeup
let zipName = '/path/to/archive.zip';

zipFolder(folderName, zipName, function(err) {
    if(err) {
        console.log('oh no! ', err);
    } else {
        console.log(`Successfully zipped the ${folderName} directory and store as ${zipName}`);
        // will be invoking upload process 
    }
});

ウフー！拡張機能の圧縮を完了しましたこれをdeploy.jsファイルに追加してください。

Chromeウェブストアにアップロード：別のパッケージchrome-webstore-uploadが登場しました。このパッケージを使用して、圧縮された拡張機能をChromeウェブストアにアップロードできます。

次のコマンドを使用して、拡張プロジェクトにパッケージをインストールします。

npm install --save chrome-webstore-upload

ファイルをウェブストアにアップロードするには、このパッケージclient IDにclient secretとrefresh token、拡張プロジェクトが必要です。これらの用語に慣れていない場合でも、心配しないでください。ウェブストアAPIを使用するには、Googleがユーザーを認証して拡張機能を識別するための識別子と認証情報が必要です。

3つの資格情報をすべて取得するには、ここに記載されている手順に従ってください。パッケージの作者であるAndrewは、このガイドを追加するという素晴らしい仕事をしました。

少し時間を取って、3つのIDと資格情報をすべて生成してください…

これらのIDと認証情報をすべて取得したら、それらの認証情報をCI環境変数（GitLab）または他のCIサービスの環境変数（Travisのenv変数や circle-ci env変数などの任意の変数）に保存します。 ⚠️これらの変数はAPI資格情報（パスワードなど）なので、これらの変数をコードベースにチェックインしないでください。

これで、zipファイルのウェブストアアップロードパッケージへのアップロードを開始できます。このステップは、圧縮プロセスが成功したときに呼び出す必要があります。

ウェブストアAPIを使用するには、作成した認証情報をシードします。資格情報をシードした後、アップロードする必要がある圧縮された拡張のファイルストリームを作成します。次に、作成したストリームを使用してアップロードAPI（uploadExisting）を呼び出します。

// getting all the credentials and IDs from `gitlab-ci.yml` file
let REFRESH_TOKEN = process.env.REFRESH_TOKEN; 
let EXTENSION_ID = process.env.EXTENSION_ID;
let CLIENT_SECRET = process.env.CLIENT_SECRET;
let CLIENT_ID = process.env.CLIENT_ID;

const webStore = require('chrome-webstore-upload')({
  extensionId: EXTENSION_ID,
  clientId: CLIENT_ID,
  clientSecret: CLIENT_SECRET,
  refreshToken: REFRESH_TOKEN
});

function upload() {
  const extesnionSource = fs.createReadStream(zipName);
  webStore.uploadExisting(extesnionSource).then(res => {
    console.log('Successfully uploaded the ZIP');    

    // call publish API on success
  }).catch((error) => {
    console.log(`Error while uploading ZIP: ${error}`);
    process.exit(1);
  });
}

これprocess.envは、変数をgitlab-ci.ymlファイルからノードプロセスに渡す方法です。この記事の後半でそれがどのように機能するかを示します。

上記の方法は、言及されたzipをドラフトとしてWebストアにアップロードします。下書きはデベロッパーコンソールで確認できます。繰り返しになりますが、マニフェストバージョンをバンプしてください。 そうしないと、APIはzipのアップロードに失敗します！

zipをwebstoreに正常にアップロードしたら、webstoreパッケージのpublish API を使用してそれを公開できます。

アップロードAPIと同様に、公開APIも同じ方法で呼び出すことができます。アップロードコマンドが成功したら、必ずこのAPIを呼び出してください。

publish() {
  // publish the uploaded zip
  webStore.publish().then(res => {
    console.log('Successfully published the newer version');
  }).catch((error) => {
    console.log(`Error while publishing uploaded extension: ${error}`);
    process.exit(1);
  });
}

あなたは何かを知っている？張機能の展開プロセスの自動化が完了しましたallすべてのスニペットをまとめて、ノードプロセスファイルを作成しましょう - deploy.js

約束通りサンプル deploy.jsファイルは以下の通り！参考にしてください。コードで手を汚してください💻

{％gist https://gist.github.com/gokatz/b99c36c74a0b0f219f3c3e4096e7d26d ％ }

ハイファイ🙏 gitlab-ci.ymlファイルからそれらのスクリプトを呼び出す時が来ました。これは私が使用しているサンプルCIファイルです（GitLab CI環境で呼び出すため）

image: node:6.10.3

before_script:
  - yarn

stages:
  - deployExtension

deployExtension:
  stage: deployExtension
  only:
    - master #to be invoked only on master merge
  script:
    - yarn build
    - CLIENT_ID=${CLIENT_ID} CLIENT_SECRET=${CLIENT_SECRET} EXTENSION_ID=${EXTENSION_ID} REFRESH_TOKEN=${REFRESH_TOKEN} node ./deploy.js

資格情報（$ {CLIENT ID}、$ {CLIENT SECRET}、$ {EXTENSION ID}、$ {REFRESH TOKEN}）は、環境変数（GitLabの場合）からプルされ、deploy.jsファイル（ルートに存在）に渡されますディレクトリ）を環境変数として使用します。それらvarablesを使用してアクセスすることができる process.env（クライアント取得する、と言う使用process.env.CLIENT、ノードプロセスにおいてIDを ID）

PS：

別のノードファイル（deploy.js）を使用せずに、gitlab-ci.ymlファイルのみ（を使用chrome-webstore-upload-cli）を使用して、これを完全に自動化できます。ただし、便宜上、エラー処理を向上させるために、個別のノードファイルを使用できます。
チョークパッケージを使用して、CI / CDログに色を振りかけることを検討してください。🎨

あなたはボーナスビデオチュートリアルを手に入れました🤩 ジョーはあなたをこのプロセス全体のビデオツアーに連れて行ってくれる素晴らしい仕事をしました。

https://www.youtube.com/watch?v=fH0jmBa-HhM

私は個人的に拡張機能を構築するのが好きです。しかし、間違いなくプロではありません！はじめにご不明な点がございましたら、ご連絡ください。パッケージのbaby-chromeは、chrome拡張機能の足場を作成し、数分で起動して実行するのに役立ちます。

https://twitter.com/practicingdev/status/973616317386428418

APIキーなど

.env ファイルに書くようにして、開発時は .gitignore に記述した .env.local とかを読むなど、開発のときだけに使うファイルをローカルに置くという方式があると思う。しかし、そもそもローカルにファイルをおいておくという使い方と、あまり相性が良くない。

Gitpod にはリポジトリごとに環境変数を保存する機能があるため、それを使うといい。

コマンドは以下のように設定、確認ができる。

gp env REFRESH_TOKEN= gp env EXTENSION_ID= gp env CLIENT_SECRET= gp env CLIENT_ID=

もしくはまたはダッシュボードから設定できます。

上記でセットした変数は eval $(gp env -e) で反映される .gitpod.ymlで下記のようにしておくとよい

tasks:
  - init: eval $(gp env -e) && npm install && npm run serve
image:
  file: .gitpod.Dockerfile

https://qiita.com/sterashima78/items/fca961e285355715d466

nojaja/readme.md

Select an option

No results found

Select an option

No results found