우리는 모든 것이 자동화 된 세상에 살고 있는데 왜 수동으로 Chrome 확장 프로그램을 게시할까요? ?

이전 기사에서 설정 한 Chrome 확장 프로그램을 게시하는 프로세스를 자동화하겠습니다.

이 기사는 길어질 것이지만 결국에는 당신의 손에 큰 것들을 갖게 될 것입니다.

이 기사에서는 주로 다음 주제에 초점을 맞출 것입니다.

1. 확장 폴더 구조를 변경하겠습니다.
2. 필요한 NPM 패키지를 설치하기 위한 setup package.json 파일
3. 코드 푸시시 배포를 자동화하도록 Github 작업 설정
4. 확장 프로그램을 업로드 할 수 있도록 Google 자격증 명을 설정하겠습니다.
5. 웹 스토어에 확장을 게시하는 스크립트 작성

• 필수 패키지 포함
• 빌드 경로 설정
• 확장 버전 업데이트
• 저장하기 위해 업로드 할 zip 파일 생성
• 클라이언트 ID 및 클라이언트 시크릿으로 웹 스토어 초기화
• 새 새로 고침 토큰 생성
• 저장할 확장 zip 업로드
• 확장 게시

확장 폴더 구조를 변경하겠습니다. 

시작하기 전에 Chrome 확장 시작하기에서 만든 확장 폴더 구조를 재정렬 하겠습니다.

이렇게 하면 코드를 관리하고 다음 단계에서 확장 zip을 만드는 데 도움이 됩니다. 이렇게 하려면 프로젝트 디렉토리 [app]에 새 폴더를 만들고 모든 확장 파일을 [app] 폴더로 이동합니다.

webpack과 같은 빌드 도구를 사용하는 경우 필요에 따라 이를 변경할 수 있습니다. 

필요한 NPM 패키지를 설치하기 위한 setup package.json 파일 

이제 프로세스를 자동화하는 데 도움이 되는 npm 패키지를 사용할 차례입니다.

이 패키지를 사용하면 우리의 노력이 줄어들고 일이 더 쉬워집니다.

필요한 패키지 :- 

• jsonfile-npm-> 이는 manifest.json 파일을 읽고 확장 버전을 업데이트하는 데 도움이 됩니다.
• zip-local-npm-> 이것을 사용하여 코드의 zip 파일을 생성합니다.
• fs-extra-npm-> fs-extra는 zip 파일을 버퍼로 읽는 데 도움이 됩니다.
• chrome-webstore-manager-npm-> 프로세스를 자동화하는 데 필요한 가장 중요한 패키지입니다.
• path-기본적으로 Node.js에서 제공하므로 명시 적으로 설치할 필요가 없습니다.

이제 package.json을 사용하여 완료하는 방법을 만들어 보겠습니다. 

package.json 파일이란 무엇입니까? 

파일에는 프로젝트와 관련된 다양한 메타 데이터가 포함되어 있습니다. 이 파일은 프로젝트를 식별하고 프로젝트의 종속성을 처리 할 수 있는 정보를 npm에 제공하는 데 사용됩니다. 

자세한 내용은 여기를 클릭하십시오 

package.json 파일을 만들고 초기화하려면 터미널에서 다음 명령을 실행하십시오.

npm init 

기본 옵션을 사용하거나 필요에 따라 세부 정보를 추가하십시오.

package.json을 생성했으면 위에서 언급 한 종속성을 설치할 차례입니다.

이렇게 하려면 다음 명령을 실행하십시오.

npm install jsonfile zip-local fs-extra chrome-webstore-manager --save-dev 

Save-dev-이 옵션은 devDependencies 속성의 package.json에 종속성을 저장합니다.

다음은 package.json의 최종 구조입니다.

{
  "name": "chrome-extension-demo",
  "version": "1.0.0",
  "description": "This is a demo extension",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "node deploy.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ganeshjaiwal/Chrome-extension-demo.git"
  },
  "keywords": [
    "chrome",
    "extension",
    "browser",
    "javascript"
  ],
  "author": "Ganesh N. Jaiwal",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ganeshjaiwal/Chrome-extension-demo/issues"
  },
  "homepage": "https://github.com/ganeshjaiwal/Chrome-extension-demo#readme",
  "devDependencies": {
    "chrome-webstore-manager": "^0.4.2",
    "fs-extra": "^9.0.1",
    "jsonfile": "^6.0.1",
    "zip-local": "^0.3.4"
  }
}

코드 푸시시 배포를 자동화하도록 Github 작업 설정 

GitHub 작업을 통해 자동화 된 작업을 추가 할 수 있습니다. 이 작업은 GitHub 저장소에서 특정 작업이 트리거 될 때 실행됩니다.

이 경우에는 node.js 스크립트를 실행하여 확장을 배포하기 위해 몇 가지 npm 명령을 실행해야 합니다.

git 허브 작업에 대해 자세히 알아 보려면 여기를 클릭하십시오.

다음은 필요한 GitHub 작업의 예입니다.

{
  "name": "chrome-extension-demo",
  "version": "1.0.0",
  "description": "This is a demo extension",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "deploy": "node deploy.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ganeshjaiwal/Chrome-extension-demo.git"
  },
  "keywords": [
    "chrome",
    "extension",
    "browser",
    "javascript"
  ],
  "author": "Ganesh N. Jaiwal",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ganeshjaiwal/Chrome-extension-demo/issues"
  },
  "homepage": "https://github.com/ganeshjaiwal/Chrome-extension-demo#readme",
  "devDependencies": {
    "chrome-webstore-manager": "^0.4.2",
    "fs-extra": "^9.0.1",
    "jsonfile": "^6.0.1",
    "zip-local": "^0.3.4"
  }
}

이 파일을 있는 그대로 GitHub 작업에 추가합니다.

이 파일을 어디에 추가할까요??

다음 폴더 구조를 만들어 작업 워크 플로 파일을 추가합니다.

-> Chrome-extension-demo
    -> app  //Our extension code
    -> .github
        -> workflows
            -> action.yml

확장 프로그램을 업로드 할 수 있도록 Google 자격증 명을 설정하겠습니다. 

게시를 자동화하려면 Google Developers Console에서 프로젝트에 Chrome 웹 스토어 API를 사용 설정해야 합니다.

1. Google 개발자 콘솔을 방문하세요.
2. 새 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
3. 왼쪽 사이드 바에서 API 및 인증을 선택합니다.
4. 표시되는 사용 가능한 API 목록에서 Chrome Web Store API의 상태를 ON으로 설정합니다.
5. 서비스 약관에 동의합니다.
6. 왼쪽 사이드 바에서 자격 증명을 선택합니다.
7. 클라이언트 ID 및 클라이언트 암호를 만들려면
   자격 증명 만들기를 클릭하십시오.
   OAuth 클라이언트 ID 선택
   응용 프로그램 유형의 데스크톱 앱
   애플리케이션 이름을 입력하세요.
   만들기 버튼을 클릭합니다.
   

? 예! 클라이언트 ID와 클라이언트 암호를 얻었습니다.

액세스 토큰 받기 : 

클라이언트 ID와 클라이언트 시크릿이 있으면 액세스 토큰을 검색하고 토큰을 새로 고칠 수 있습니다. 액세스 토큰은 확장 프로그램을 업로드하고 게시하도록 스크립트를 승인하는 역할을 합니다.

참고 :-액세스 토큰은 40 분 후에 만료됩니다. 따라서 지속적 배포 프로세스에서 확장을 배포하는 동안 항상 새 확장을 만들어야 합니다. 

새로운 access_token을 생성하려면 refresh_token을 사용합니다.

access_token 및 refresh_token을 생성 해 보겠습니다. 

1. 다음 URL을 사용하여 access_token 생성에 사용되는 코드를 생성하십시오.

https://accounts.google.com/o/oauth2/auth?response_type=code&scope=https://www.googleapis.com/auth/chromewebstore&client_id=$CLIENT_ID&redirect_uri=urn:ietf:wg:oauth:2.0:oob

$CLIENT_ID를 이전 단계에서 생성 한 클라이언트 ID로 바꿉니다.

업데이트 된 URL을 브라우저에 붙여넣고 Enter를 누르십시오.

확장 프로그램을 업로드 한 동일한 Google 계정을 선택하십시오.

Chrome 확장 프로그램 및 앱을 보고 관리 할 수 있는 권한을 부여합니다.

1. 권한을 부여한 후 인증 코드를 받습니다. 해당 코드를 복사하여 access_token을 생성하십시오.

1. 터미널을 열어 다음 curl 요청을 실행하십시오. 위의 코드를 사용하여 액세스 토큰을 요청하십시오. 예를 들어 curl을 사용하면 다음 명령을 실행하여 액세스 토큰을 얻을 수 있습니다 ($CLIENT_ID, $CLIENT_SECRET 및 $CODE 값을 위의 값으로 대체).

curl "https://accounts.google.com/o/oauth2/token" -d \
"client_id=$CLIENT_ID&client_secret=$CLIENT_SECRET&code=$CODE&grant_type=authorization_code&redirect_uri=urn:ietf:wg:oauth:2.0:oob"

다음과 같은 결과가 반환됩니다. 

{
  "access_token" : "ya29...",
  "token_type" : "Bearer",
  "expires_in" : 3600,
  "refresh_token" : "1/rwn..."
}

배포 스크립트에서 이 토큰을 사용할 새로 고침 토큰을 기록해 둡니다.

웹 스토어에 확장을 게시하는 스크립트 작성 

확장의 루트 수준에서 새 JavaScript 파일을 만들고 이름을 deploy.js로 지정합니다.

1. 필수 패키지 포함 NPM을 사용하여 설치 한 패키지를 가져옵니다.

const fs = require('fs-extra');
const zipper = require("zip-local");
const jsonfile = require('jsonfile');
const path = require('path');
const ChromeWebstore = require('chrome-webstore-manager');

1. 빌드 경로 설정

const itemId = "EXTENSION_ID";
var buildLocation = path.join(__dirname, "app");

EXTENSION_ID를 이전 기사에서 업로드 한 확장 프로그램의 ID로 바꿉니다. 

ID는 다음과 같을 수 있습니다 .- ecjchthpmtdecenmykiuipbibkhcijlj

1. 확장 버전 업데이트 스토어에 새 패키지를 업로드하는 동안 새 버전을 추가하십시오. Google은 동일한 버전의 새 패키지 업로드를 허용하지 않습니다. 매니페스트 파일 읽기 새 버전 생성 새 버전으로 업데이트 업데이트 된 버전으로 매니페스트 파일 작성

// read manifest file
var manifest = jsonfile.readFileSync(path.join(buildLocation, "manifest.json"));
function getNewVersion() {
       var ver = parseInt(manifest.version.split('.')[0]);
       ver++;
       return `${ver}.0.0`;
}
var version = getNewVersion();
// replace version
manifest.version = version;
// save manifest file
jsonfile.writeFileSync(path.join(buildLocation, "manifest.json"), manifest);

1. zip 파일을 생성하고 저장하기 위해 업로드 할 파일을 읽습니다.

// create zip
zipper.sync.zip(buildLocation).compress().save(path.join(buildLocation, "build.zip"));
const fileBin = fs.readFileSync(path.join(buildLocation, "build.zip"));

1. 클라이언트 ID 및 클라이언트 시크릿으로 웹 스토어 초기화

// Initialize with ClientID and ClinetSecret
const chromeWebstore = new ChromeWebstore("<CLIENT_ID>", "<CLIENT_SECRET>");

CLIENT_ID 및 CLIENT_SECRET을 이전에 만든 값으로 바꿉니다.

1. 새 access_token 생성 다음 함수를 사용하여 새 access_token을 생성합니다.

chromeWebstore.getRefreshToken("<REFRESH_TOKEN>")

REFRESH_TOKEN을 이전 프로세스에서 생성 한 refresh_token으로 바꿉니다.

1. 저장할 확장 zip 업로드

chromeWebstore.updateItem(newToken, fileBin, itemId)

6 단계에서 우리는 새로운 access_token을 포함하는 객체를 반환하는 promise를 얻을 것입니다.

이 액세스 토큰을 사용하여 chromeWebstore의 업데이트 방법으로 확장 zip을 업로드합니다.

1. 확장 게시

chromeWebstore.publishItem(newToken, itemId)

업로드가 완료되면 확장을 게시 할 준비가 된 것입니다. 게시하기 위해 chromeWebstore의 publishItem 메소드를 사용합니다.

스크립트를 완료하기 위해 마지막 3 단계를 함께 유지하겠습니다. 

// Get new token with refresh_token
chromeWebstore.getRefreshToken("<REFRESH_TOKEN>").then(function (data) {
   const json = JSON.parse(data)
   const newToken = json.access_token
   chromeWebstore.updateItem(newToken, fileBin, itemId).then((data) => {
       console.log(data);
       chromeWebstore.publishItem(newToken, itemId).then((data) => {
           console.log(data);
       });
   });
});
console.log("Deployed version is " + version);

만세! ?? 

마지막으로 배포 스크립트 생성이 완료되었습니다.

이제 확장 코드를 저장소로 푸시하면 Github Action이 트리거 됩니다.

워크 플로 파일에서 배포 스크립트를 트리거 하는 명령을 작성했으며 확장은 배포 스크립트를 사용하여 자동으로 업데이트 됩니다.