【초보자】chrome 확장을 TypeScript로 개발할 때의 Webpack 설정

14905 단어 TypeScriptchrome-extensionChrome자바스크립트webpack
나는 크롬 확장, TypeScript 초보자입니다. 실수 등 있으면 가르쳐 주시면 고맙습니다.

chrome-extension-typescript-starter



chrome-extension-typescript-starter 여기에서 간단하게 시작할 수 있었습니다.

여기 webpack의 설정이 꽤 참고되었습니다.

(아마) 최소 구성



열려 있는 페이지의 링크를 나열할 수 있는 확장 기능을 만드세요.

내가 궁극적으로 만든 코드는 여기
  • htps : // 기주 b. 코 m / 오쿠무라 켄고 / ぇ b pack-ts-ch romee xt 
    • yarn add -D webpack webpack-cli copy-webpack-plugin typescript ts-loader @types/webpack @types/chrome

    폴더 구성
    .
├── package.json
├── public
│   ├── icon.png
│   ├── manifest.json
│   └── popup.html
├── src
│   ├── content.ts
│   └── popup.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

    webpack.config.js
    const CopyPlugin = require("copy-webpack-plugin");

/**
 * @type import("webpack").Configuration
 */
module.exports = {
    mode: process.env.NODE_ENV || "development",
    devtool: "inline-source-map",
    entry: {
        popup: `${__dirname}/src/popup.ts`,
        content: `${__dirname}/src/content.ts`,
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    plugins: [
        // publicフォルダに、manifest.jsonやicon.pngを置いたので、
        // それが一緒に./distフォルダに吐き出されるようにする
        new CopyPlugin([
            { from: "./public", to: "./" }
        ]),
    ]
}

    tsconfig.json
    {
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "strict": true,
        "rootDir": "src",
        "allowJs": true,
        "esModuleInterop": true
    }
}
  • popup을 열 때 활성 탭으로 메시지를 보내고
  • 페이지에서 검색된 URL을 popup.js로 다시 보냅니다.

    라고 하는 동작으로 하기 위해서, permissions 로 tabs 의 권한을 붙였습니다

    public/manifest.json
    {
    "manifest_version": 2,
    "name": "sample",
    "version": "1.0",

    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ],

    "browser_action": {
        "default_icon": {
            "16": "icon.png"
        },
        "default_popup": "popup.html"
    },

    "permissions": [
        "tabs"
    ]
}

    public/popup.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Extension</title>
    <style>
        body {
            min-width: 300px;
        }
    </style>
</head>
<body>
    このページのリンクのリスト
    <ul id="lists"></ul>
    <script src="popup.js"></script>
</body>
</html>

    src/popup.ts
    // popupが開かれたときに、content.jsへメッセージを通知
chrome.tabs.query({ currentWindow: true, active: true }, ([ tab ]: chrome.tabs.Tab[]) => {
    chrome.tabs.sendMessage(tab.id as number, {});
});

// content.jsから送信されてきたメッセージを取得
const lists: HTMLUListElement = <HTMLUListElement>document.getElementById("lists")
chrome.runtime.onMessage.addListener(({ urlList }) => {
    lists.innerHTML = urlList.map((url: string) => `<li>${url}</li>`).join("");
})

    src/content.ts
    const links: HTMLCollectionOf<HTMLAnchorElement> = document.getElementsByTagName("a")

// popup.jsからメッセージを受け取って、ページ内で取得したデータを送り返す
chrome.runtime.onMessage.addListener(() => {
    chrome.runtime.sendMessage({ urlList: [...links].map((a: HTMLAnchorElement) => a.href)});
});

    이 상태에서 yarn webpack 라고 하면, ./dist 디렉토리에 모든 파일이 설치됩니다
    ./dist 를 지정하여 chrome://extensions/ 에서 로드하면 작성한 확장 기능을 사용할 수 있습니다.



    열려 있는 페이지 내의 모든 링크를 볼 수 있는 확장 기능을 TypeScript로 작성할 수 있었습니다.



    끝까지 읽어 주셔서 감사합니다. m(_ _)m
    • 【Markdown】9.9초로 3x3의 표를 만드는 Chrome 확장을 만들었다.
    Chrome 기록을 AWS로부터 보호 (chrome-extension)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage