ReactJS를 사용하여 Chrome 확장 구축

12008 단어 reactwebdevjavascript

이 강좌는 Chrome 확장의 작동 원리를 알고 있다고 가정합니다.


작업 방법에 대해 알고 싶으면 내 비디오 자습서를 참조하십시오.


또는 내 dev.to 글: 크롬확장 구축 방법 an-object-is-a・ 이십년 구월 27일・ 삼.분 읽기 #javascript # 반응 # 웹 개발자


. . .

시작합시다.


우리는 npm를 초기화하는 것부터 시작할 것이다.>>npm init -y그리고 우리는 필요한 모든 소프트웨어 패키지를 설치할 것이다.
우선 개발 의존항이다.>>npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader copy-webpack-plugin clean-webpack-plugin html-loader html-webpack-plugin webpack webpack-cli webpack-dev-server그리고 비개발 의존항.>>npm install react react-dom react-router-dom가방에서우리는 우리의 개발과 생산을 위해 각본을 쓸 것이다.
"스크립트"아래에 추가합니다.
// package.json

"build": "webpack-dev-server",
"build:prod": "webpack -p"
. . .

ReactJS 파일을 만듭니다.


이 파일들을 위한'src'폴더를 만듭니다.
"src"폴더에서 우리가 작성할 ReactJS 구성 요소에 "components"폴더를 만듭니다.
중요한 것은 우리가 모든 구글 브라우저의 확장 기반을 덮어씌워야 한다는 것이다.
이것은 우리가'전경 또는 내용'페이지,'팝업'페이지와'옵션'페이지를 최소한으로 필요로 한다는 것을 의미한다.
추가 파일, 배경 스크립트, 목록 및 아이콘은 나중에 제공됩니다.
ReactJS 파일의 구조는 다음과 같습니다.

  • 입구점 - "div"가 있는 HTML 파일입니다. 삽입할 수 있습니다

  • 초기 렌더링 파일 - 이것은 JavaScript 파일로 ReactJS 구성 요소를 입구점에 주입합니다
    • .

  • 초기 ReactJS 구성 요소 파일 - JavaScript 파일입니다. HTML로 초기 렌더링할 것입니다
    • .
     
    전경, 팝업 창, 옵션에 대한 입구점을 만듭니다.
    우리가 "div"에게 준 "id"를 제외하고는 코드는 모두 같다.
    // foreground.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="foreground"></div>
</body>
</html>

    // popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="popup"></div>
</body>
</html>

    // options.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="options"></div>    
</body>
</html>
     
    전경, 팝업 창 및 옵션에 대한 초기 렌더링 파일을 만듭니다.
    가져온 이름을 제외하고 코드는 모두 같다.
    // index-foreground.js

import React from 'react';
import { render } from 'react-dom';
import Foreground from './components/Foreground.js';
render(<Foreground />, document.querySelector('#foreground'));

    // index-popup.js

import React from 'react';
import { render } from 'react-dom';
import Popup from './components/Popup.js';
render(<Popup />, document.querySelector('#popup'));

    // index-options.js

import React from 'react';
import { render } from 'react-dom';
import Options from './components/Options.js';
render(<Options />, document.querySelector('#options'));
     
    프론트 데스크톱, 팝업 창, 옵션을 위한 초기 ReactJS 구성 요소를 만듭니다.

    여기에서 ReactJS 응용 프로그램을 자유롭게 만들 수 있습니다.


    // components/Foreground.js

import React from 'react';
function Foreground() {
    return (
        <div style={styles.main}>
            <h1>Chrome Ext - Foreground</h1>
        </div>
    )
}
const styles = {
    main: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: '1000',
        fontSize: '80px',
        pointerEvents: 'none'
    }
}
export default Foreground;

    // components/Popup.js

import React from 'react';
function Popup() {
    return (
        <div style={styles.main}>
            <h1>Chrome Ext - Popup</h1>
        </div>
    )
}
const styles = {
    main: {
        width: '300px',
        height: '600px'
    }
}
export default Popup;

    // components/Options.js

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect
} from "react-router-dom";
import Popup from './Popup.js';
import Foreground from './Foreground.js';
function Options() {
    return (
        <Router>
            <div style={styles.container}>
                <div style={styles.nav_bar}>
                    <h1>Chrome Ext - Options</h1>
                    <nav>
                        <ul>
                            <li>
                                <Link to="/">Options</Link>
                            </li>
                            <li>
                                <Link to="/popup">Popup</Link>
                            </li>
                            <li>
                                <Link to="/foreground">Foreground</Link>
                            </li>
                        </ul>
                    </nav>
                </div>
                <Switch>
                    <Route exact path="/popup">
                        <Popup />
                    </Route>
                    <Route exact path="/foreground">
                        <Foreground />
                    </Route>
                    <Route exact path="/">
                        <Redirect to="/options.html" />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}
const styles = {
    container: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    }
}
export default Options;
    주:
    이 프로젝트의 CSS가 ReactJS 파일에 어떻게 있는지 주의하십시오.우리는 이렇게 하지 않을 것이다
    이 강좌의 개별 CSS 파일입니다.
    . . .

    Chrome 확장자별 파일을 만듭니다.


    우리는 다음을 필요로 합니다.
  • 선적 명세서.json 파일
  • a 배경.js 파일
  • 우리의 프론트 데스크톱에 주입하는 스크립트 파일입니다.html의 "div"(이것은 매우 중요)
  • 아이콘 x 4
    우리의 선적 명세서.제이슨 "특별한 거 필요 없어요.
    배경, 옵션, 팝업 페이지를 지정하는 일반적인 목록일 뿐입니다.
    • // manifest.json

{
    "name": "ReactJS Chrome Extension",
    "description": "Using ReactJS to build a Chrome Extension",
    "version": "0.1.0",
    "manifest_version": 2,
    "icons": {
        "16": "./obj-16x16.png",
        "32": "./obj-32x32.png",
        "48": "./obj-48x48.png",
        "128": "./obj-128x128.png"
    },
    "background": {
        "scripts": ["./background.js"]
    },
    "options_page": "./options.html",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ] 
}
     
    우리의 배경.js의 작업 절차는 유일무이하다.
    다음은 우리가 해결해야 할 문제입니다.
    ReactJS 응용 프로그램을 개발할 때 색인 전망입니다.js의 JSX 파일을 프론트에 주입합니다.html의 "div".
    Chrome 확장으로 전환할 때 사용자가 보고 있는 페이지에 프론트 데스크톱이나 내용 스크립트를 주입하기를 원합니다.
    문제는 그들이 이런 구조를 가지고 있지 않다는 것이다.
    전망이 없다.html“”div“”.
    우리는 주입하기 전에 그들의 페이지에 이 요소를 만들어야 한다
    색인 전경.js가 그들의 페이지로 들어갑니다.
    // background.js

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status === 'complete' && 
        tab.url.includes('http')) {
        chrome.tabs.executeScript(tabId, { file: 
            './inject_script.js' }, function () {
            chrome.tabs.executeScript(tabId, { file: 
               './foreground.bundle.js' }, function () {
                   console.log('INJECTED AND EXECUTED');
            });
        });
    }
});

    // inject-script.js

const foreground_entry_point = document.createElement('div');
let reactJS_script = document.createElement('script');

foreground_entry_point.id = 'foreground';

foreground_entry_point.appendChild(reactJS_script);
document.querySelector("body").appendChild(foreground_entry_point);
    주:
    나는 스크립트 주입을 만들었다.특수한 전망의 js 파일을 만듭니다.html“”div“”.
     
     
    이 아이콘들은 말하지 않아도 안다.
    . . .

    이 강좌에서 가장 중요한 단계.


    이 메시지를 건너뛰지 마십시오.


    이것이 바로 우리가 REACTJS 프로젝트를 CHROME으로 변환하여 확장하는 방법입니다.


     

    웹 패키지를 처리합시다.구성js’。


    '웹팩'이 도대체 어떻게 작동하는지에 관해서 나는 지나치게 상세하게 설명할 생각은 없다.
    그러나 나는 문서가 말한 내용을 설명할 것이다.

    우리는'웹 패키지'로 무엇을 합니까?


    우리는 많은 서류를 가지고 있다.
    그중 일부 파일은'html'이다.
    일부는 PNG 또는 JPG입니다.
    일부는 JavaScript 전용입니다.
    일부는 JavaScript 및 JSX(ReactJS)의 혼합입니다.
    우리는 일부 항목을 전송하고 다른 항목을 간단하게 복사하기 위해'웹 패키지'를 사용해야 한다.
    구체적으로 말하자면, 우리는 JSX를 Javascript (이것이 바로 babel 의존항의 목적) 로 바꾸고 우리의 html, 아이콘, 순수한 Javascript 파일을 복제하기를 희망한다.

    주:

    그럼 여기서 무슨 일이 일어났어요


    • 'HtmlWebpackPlugin'은 html 파일을 목표 목표로 복사할 수 있도록 합니다.
    • "CopyWebPackagePlugin"은 변환 없이 모든 파일을 대상 대상으로 복사할 수 있도록 합니다.
    • "CleanWebPackagePlugin"은 구축하기 전에 목표 목표의 모든 파일을 삭제하는 데 사용됩니다.
    • 실시간 ReactJS 개발에 devServer가 사용됩니다.
    • 포털은 세 개의 점을 정의합니다.이것들은 JSX를 html 입구점 파일에 주입하는 JSX 초기 렌더링 파일입니다.
    • "output"은 "웹팩"이 그것들을 "bundle"이라고 명명하고 어디에 저장하는지 알려 줍니다.
    • '모듈'은'웹 패키지'가 서로 다른 유형의 파일을 처리하는 방법을 알려주는 곳이다.
      "웹팩"체인에 포함된 모든 JavaScript/JSX 파일에 대해 코드를 전송하십시오.
      모든 HTML 파일에 대해 "웹팩"이 우리의 "bundle"과 통합할 수 있도록 변환합니다.
    • 플러그인은 단일 파일이 모듈을 통해 변환된 후에 실행됩니다.
      HTML 파일을 적절한 번들 (블록) 과 병합하여 서버 또는 하드 드라이브로 내보내고 전송하지 않으려는 파일을 복사하여 정리 프로그램을 실행하고 있습니다.


    우리는 우리의 개발 환경 설정과 서류를 모두 기입했다.


    우리 어떡하지

    두 가지 방식


    개발의 경우 "build"명령을 실행하십시오
    >>npm run build


    브라우저에서 ReactJS 응용 프로그램 보기

    로컬 호스트: 8080


    생산에 대해 우리는 우리의 웹 패키지를 조정해야 한다.구성그리고 "build:prod"명령을 실행합니다


    comment out the ‘HtmlWebpackPlugin’ for the foreground
    We don’t need to export the ‘foreground.html’ file into production because we’re creating our own ‘foreground.html’ ‘div’ using the ‘background.js’ and ‘inject-script.js’ scripts.




    현재 운영 스크립트 실행
    >>npm run build:prod


    Chrome 브라우저에 운영 확장 로드


    "dist"디렉터리 선택




    ReactJS를 사용하여 Google Chrome 확장을 만드는 것은 실험적인 약간 "해커" 솔루션이라는 것을 기억하십시오.


    나는 개발과 생산 라인을 가능한 한 간소화하기 위해 최선을 다했다

    나는 아직'npm'소프트웨어 패키지에 대해 광범위한 테스트를 진행한 적이 없다

    내 시도에 따르면'react routerdom'은 유효하다

    당신의 이정은 다를 수 있습니다



    원본 파일here을 얻을 수 있습니다


    더 깊은 지침을 원한다면 유튜브에 있는 나의 전체 동영상 강좌를 보십시오. 대상은


    React를 사용하여 Chrome 확장 구축(2020 웹 개발)



    leetcode971. 두 갈래 나무를 뒤집어서 일치하는 순서로 훑어보다
    프로그래밍의 아름다움: 두 갈래 트리 중 노드의 최대 거리 구하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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