React JS를 사용하여 Chrome 확장 프로그램을 만드는 방법

8250 단어 chromeextensionchromereactjavascript
많은 사람들이 React JS를 사용하여 웹 앱을 만드는 방법을 알고 있습니다. 이를 감안할 때 이 동일한 지식을 사용하여 Chrome 확장 프로그램도 만들 수 있습니다. 이 게시물에서는 React JS를 사용하여 크롬 확장 프로그램을 만들고 게시하는 방법에 대한 간단한 단계를 알려드리겠습니다.

전제 조건:
  • React JS(create-react-app)

    • 시작하기



    애플리케이션을 설정하기 위해 create-react-app을 사용할 수 있습니다. 처음 듣는 경우 공식documentation으로 이동하여 자세히 알아볼 수 있습니다.

    npx create-react-app my-chrome-extension-name


    위의 명령을 실행하면 create-react-app이 새로운 반응 앱을 설정합니다. my-chrome-extension-name 폴더로 이동하여 원하는 코드 편집기를 엽니다.

    이제 새로 생성된 반응 앱을 실행하려면 로컬 서버를 회전시키는 아래 명령을 실행하십시오.

    npm run start


    HTML과 CSS를 추가하자



    이제 src 폴더 안에 있는 App.js 파일로 이동합니다. 여기에서 미리 정의된 많은 코드를 볼 수 있습니다. 내부의 모든 코드<div className="App">를 제거하고 자신의 HTML로 교체하십시오. 이 경우에는 'Hello World' 텍스트가 포함된 제목 태그만 추가합니다. 파일 내용은 다음과 같아야 합니다.

    import './App.css';
function App() {
    return (
        <div className="App">
            <h1>Hello World</h1>
        </div>
    );
}

export default App;


    다음으로 App.css 파일 내부의 콘텐츠를 제거하고 아래에 언급된 몇 가지 기본 스타일로 대체하겠습니다.

    body {
    box-sizing: border-box;
}

.App {
    min-height: 250px;
    min-width: 400px;
    background: linear-gradient(to right bottom, #2999f5, #1859d1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.App h1 {
    font-size: 18px;
    color: #fff;
    text-align: center;
}


    이 앱을 Chrome에서 작동하게 만들기



    반응 앱 내부에 필요한 변경 사항을 완료했습니다. 크롬에서 작동하도록 몇 가지를 더 추가해 보겠습니다.

  • 루트 폴더my-chrome-extension-name 안에 '.env.production'이라는 이름의 새 파일을 만들고(따옴표 없이 시작 부분에 마침표를 추가해야 함) 그 안에 아래 줄을 추가합니다.

    INLINE_RUNTIME_CHUNK=false

    이 줄이 없으면 크롬 내에서 확장 프로그램을 가져올 때 '콘텐츠 보안 정책' 오류가 표시됩니다. 기본적으로 이 오류는 Chrome(또는 거의 모든 최신 브라우저)에서 인라인 스크립트 실행을 허용하지 않기 때문에 발생합니다.

  • public 폴더로 이동하여 'manifest.json'의 내용을 아래 코드로 바꿉니다.

    {
  "name": "First Chrome Extension",
  "description": "This is a First Chrome Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "author": "Author Name",
  "icons": {
    "16" : "favicon.ico",
    "48" : "favicon.ico",
    "128" : "favicon.ico"
  },
  "action": {
    "default_popup": "index.html"
  }
}

    위의 JSONhere 내에서 다양한 값과 수행하는 작업에 대해 읽을 수 있습니다.

  • 이제 아래 명령을 실행하여 확장 프로그램을 컴파일합니다.

    npm run build

    확장 폴더 안에 빌드 폴더가 생성됩니다. 다음 단계에서 수행할 크롬 내에서 이 빌드 폴더를 가져와야 합니다.

    • Chrome에서 확장 프로그램 가져오기



    이제 자체 크롬 확장 프로그램을 만드는 모든 단계를 완료했습니다. 우리가 해야 할 일은 이제 Chrome 내부에서 동일한 것을 가져오는 것입니다. 다음 단계를 따르십시오.
  • Chrome 열기
  • chrome://extensions/로 이동합니다.
  • 오른쪽 상단에서 개발자 모드를 켭니다.
  • 압축을 푼 상태로 로드를 클릭합니다.
  • Chrome 확장 프로그램 폴더 내에서 'build' 폴더를 찾아 선택합니다.

    • 이제 크롬 내에서 크롬 확장 프로그램을 볼 수 있어야 합니다.

    참고 사항


  • 확장 프로그램을 변경할 때마다 매번 'npm run build' 명령을 실행하고 확장 프로그램을 Chrome 내에서 다시 로드해야 변경 사항을 확인할 수 있습니다
    • .
  • 확장 프로그램을 Chrome의 웹 스토어에 게시하려면 언급된 단계를 따르십시오here.
  • 위에서 언급한 것과 동일한 단계로 저장소를 만들었습니다. 이 리포지토리를 사용하여 고유한 확장을 만들 수 있습니다. 여기 Github Link에서 같은

    • 도움이 되었기를 바랍니다. 질문이 있으시면 제 이메일 주소 "[email protected]"로 저에게 연락하실 수 있습니다.

    고맙습니다! 💖
    [WIP] 비 CS 담당자가 동적 프로그래밍(DP)을 설명합니다.
    1224. Java의 Leetcode 솔루션

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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