TypeScript로 만드는 이마도키 Chrome 확장 기능 개발 입문

Chrome 확장 개발의 입문 자료는 세상에 많이 있습니다만, 상당히 옛날에 쓰여진 것이 많아, 이마도키풍(라고 해도 그렇게 새롭지는 않습니다만 웃음)에 TypeScript를 사용했을 경우의 개발 방법을 적습니다 했다.
덧붙여 초보자의 방향으로, 간단합니다만 Chrome 확장의 구조로부터 설명해 갑니다.

Chrome 확장 방법

이하의 3개의 등장 인물을 기억하면 OK입니다.

Content Scripts

페이지의 DOM을 조작(취득·추가·갱신·삭제)할 수 있는 script. (3개의 등장 인물 중에서는 유일)
그러나 액세스할 수 있는 Chrome API는 일부로 제한됩니다.
이것을 사용해 특정의 페이지에 독자적인 UI를 임베드하거나 할 수 있다.

Browser Action(Page Action)

주소 표시줄 오른쪽에 있는 확장 프로그램 아이콘을 클릭했을 때의 작업입니다.
다양한 Chrome API에 액세스할 수 있습니다.

이벤트 페이지 (배경 페이지)

Chrome이 움직이는 동안 뒤에서 움직이는 스크립트.
Browser Action처럼 다양한 Chrome API에 액세스할 수 있습니다.
Background Page는 더 이상 사용되지 않습니다.

Chrome 확장 프로그램의 구조

삼자는 각각 메시지로 교환할 수 있습니다.

최소 노력으로 만드는 Chrome 확장

외부에 공개하지 않는 최소한의 chrome 확장 기능을 만드는 것은 1시간도 사용하지 않고 할 수 있다

보고 후 공식 문서를보십시오, 이상. .
입니다만, 이번은 조금 나우한 환경으로 해 봅니다.
조건은 이런 느낌입니다.

TypeScript를 사용하고 싶습니다

Promise를 사용하고 싶습니다

TypeScript로 Chrome 확장 개발

generator-chrome-extension-kickstart-typescript →별로 유지되지 않고 불안

chrome-extension-typescript-starter → jQuery와 moment가 필요하지 않을까,

결국 이것 정도라면 스스로 만들어 버리자는 노리가 되었습니다.

필요한 패키지 설치

yarn add webextension-polyfill-ts # Chrome APIでPromiseを使えるpolyfill
yarn add -D typescript webpack webpack-cli copy-webpack-plugin ts-node ts-loader @types/webpack @types/copy-webpack-plugin

대충 init

yarn init
yarn tsc --init

디렉토리 구성

├── package.json
├── public
│   ├── icon_32.png
│   └── manifest.json
├── src
│   └── content_scripts.ts
├── tsconfig.json
├── webpack.config.ts
└── yarn.lock

빌드 설정

import { ConfigurationFactory } from 'webpack'
import path from 'path'
import CopyWebpackPlugin from 'copy-webpack-plugin'

const config: ConfigurationFactory = () => {
  return {
    entry: {
      content_scripts: path.join(__dirname, 'src', 'content_scripts.ts')
    },
    output: {
      // distディレクトリにcontent_scripts.jsを吐く
      path: path.join(__dirname, 'dist'),
      filename: '[name].js'
    },
    module: {
      rules: [
        {
          test: /.ts$/,
          use: 'ts-loader',
          exclude: '/node_modules/'
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    },
    plugins: [
      // publicディレクトリにあるファイルをdistディレクトリにコピーする
      new CopyWebpackPlugin([
        { from: 'public', to: '.' }
      ])
    ]
  }
}

export default config

데이터를 storage에 읽고 쓰는 content_scripts 샘플

content_scripts.ts

import { browser } from 'webextension-polyfill-ts'

const execute = async () => {
  const value = await browser.storage.local.get('date')
  console.log(value.date || '日時が記録されていません')

  await browser.storage.local.set({ date: new Date().toString() })
  console.log('現在の日時を記録しました')
}

execute()

그리고는 yarn webpack 하고 dist 디렉토리를 Chrome에서 읽을 뿐!

출처

【여담】chrome.storage API에 대해

확장 프로그램으로 데이터를 영구화하려면 브라우저의 localStorage를 사용할 수 있지만,
localStorage의 범위 문제가 다소 어렵습니다.
chrome의 API로 storage가 준비되어 key-value 형식의 데이터를 저장할 수 있습니다.

ch 로메. s 호랑이

덧붙여서 저장된 데이터는 ~/Library/Application Support/Google/Chrome/Default/Local Extension Settings/{ExtensionのID} 에서 볼 수 있습니다.
(여담의 여담입니다만, 확장 기능의 코드는 ~/Library/Application Support/Google/Chrome/Default/Extensions/{ExtensionのID}/{Extensionのversion} 로부터 볼 수 있습니다)

├── 000003.log
├── CURRENT
├── LOCK
├── LOG
└── MANIFEST-000001

000003.log를 보면 어쨌든 데이터가 기록되고 있는 것을 확인할 수 있습니다. (LevelDB라는 형식인 것 같습니다만, 나는 잘 모르겠습니다,,)

또한 chrome.storage.local 에서 로컬 파일에 데이터를 저장할 수 있지만 chrome.storage.sync 로 데이터를 동기화할 수도 있습니다!

【여담】jQuery 불요설

Chrome 확장 기능이라고 하면, jQuery가 사용해 개발되고 있는 예를 매우 많이 볼 수 있습니다만, 개인적으로 요즈음은 jQuery의 필요성이 점점 희미해지고 있을까라고 느끼고 있습니다. ECMAScript의 사양이 새롭게 되어 배열 조작 등 편리한 기능이나 구문이 점점 늘고 있습니다.

DOM의 Load를 기다리고 나서 스크립트를 실행하는 것과 같은 실행 타이밍의 제어도, Content Scripts의 run_at 라고 하는 필드를 설정하면 간단하게 할 수 있습니다. 자세한 내용은 공식 문서를 참조하십시오.