Reactjs를 사용하여 웹 확장 기능 구축 - 0부터 게시까지!
10357 단어 reactcodenewbiewebdevbeginners
우리는 새로운 라벨 인사를 베이킹해서
Chrome Web Store 와 Firefox Addon Dashboard 에 발표할 것이다.
단계 1 - 응용 프로그램을 만들려면 다음과 같이 하십시오.
CRA로 React 애플리케이션을 만듭니다.
npx create-react-app greetings-web-extension cd greetings-web-extension빠른 정리를 해보겠습니다.src 폴더에서 App.js, index.js 및 index.css를 제외한 모든 컨텐츠를 삭제합니다.public 폴더에서 index.html 및 favicon.ico 이외의 모든 컨텐츠를 삭제합니다.마지막으로 다음과 같은 디렉토리 구조가 있어야 합니다.
2단계 - 애플리케이션 준비:
다음과 같이 여러 파일을 빠르게 수정합니다.
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
height: 100%;
background: linear-gradient(to bottom right, #7b4397, #dc2430);
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
import React from "react";
const greetings = {
morning: "Good morning",
noon: "Good afternoon",
evening: "Good evening",
night: "Good night",
};
class App extends React.Component {
constructor() {
super();
this.state = {
greeting: greetings.morning,
};
this.startTime = this.startTime.bind(this);
}
componentDidMount() {
this.startTime();
}
startTime() {
let today = new Date();
let h = today.getHours();
let greeting;
if (h > 6 && h < 12) {
greeting = greetings.morning;
} else if (h >= 12 && h < 17) {
greeting = greetings.noon;
} else if (h >= 17 && h < 20) {
greeting = greetings.evening;
} else {
greeting = greetings.night;
}
this.setState({ greeting });
setTimeout(this.startTime, 1000);
}
render() {
return (
<div className="App">
<h1>{this.state.greeting}</h1>
</div>
);
}
}
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>Greetings</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
3단계 - React 애플리케이션을 테스트합니다.
우리 수중에 있는 물건을 빨리 테스트해 봅시다.
npm start로 점화하다.브라우저에는 다음과 같은 내용이 표시되어야 합니다.
4단계 - 웹 확장 준비:
우리가 먼저 필요로 하는 것은
manifest.json 파일입니다. 이것은 우리가 구축하고 있는 웹 확장의 설명자 파일입니다.디렉토리
extras를 만들고 그 다음에 새 파일manifest.json을 만들고 다음 내용을 복사/붙여넣습니다.{
"name": "greetings",
"offline_enabled": true,
"short_name": "greetings",
"description": "Everyday greetings",
"version": "1.0.0",
"chrome_url_overrides": {
"newtab": "index.html"
},
"manifest_version": 2
}
newtab으로 덮어쓰기를 원합니다index.html.그래서...INLINE_RUNTIME_CHUNK=false react-scripts build왜INLINE_RUNTIME_CHUNK=false?만약 우리가 이렇게 하지 않는다면 최종 버전
index.html 은 구축 과정의 결과로 내연 스크립트를 포함할 것이다.Extension에서는 내부 스크립트를 사용하지 않도록 외부 스크립트를 사용하는 것이 좋습니다.INLINE_RUNTIME_CHUNKenv 변수를 사용하면 우리는 상술한 문제를 돌아갈 것이다.위의 명령은 프로젝트 루트 디렉토리에
build 폴더를 생성합니다.현재, 우리가 만든
manifest.json 파일을 이 새 구축 폴더에 복사하거나 붙여넣습니다.(왜build 폴더에 파일을 직접 만들지 않습니까?build 명령을 실행할 때마다build 폴더가 삭제되고 다시 생성되기 때문입니다. 따라서 extras에 저장합니다.)5단계 - 확장 테스트:
이제 크롬 브라우저를 시작하고
chrome://extensions/에 들어가서 개발자 모드를 사용합니다.현재
Load unpacked 단추를 누르고 프로젝트의build 폴더를 가리키십시오.Chrome에서 새 탭을 열어 테스트합니다.
6단계 - Chrome 및 Firefox 패키지:
Chrome 패키지는 zip 명령일 뿐입니다.
Firefox 패키지는 권장 도구web-ext로 구성할 수 있습니다.
npm i -g web-ext를 사용하여 전역 설치를 수행합니다.목록을 복사하거나 붙여넣는 수동 절차를 없앨 수 있습니다.Firefox와 Chrome 패키지 명령 등을 실행하는 json 파일입니다. 이 작업을 완성하기 위해 작은 스크립트
node.js 를 만들었습니다.프로젝트의 루트 디렉터리에 새 파일을 만듭니다.
buildPackage.js 라고 합니다.다음 내용을 넣으시오.const { execSync } = require("child_process");
// FILENAMES
const manifestFileName = "manifest.json";
// DIRECTORIES
const buildDir = "./build/";
const extensionDir = "./extras/";
const outputs = "./";
// OUTPUTS
const chromeOutput = "greetings-chrome.zip";
console.log("Building Extension Packages");
console.log("***COPYING MANIFEST FILE***\n\n");
execSync(
`cp ${extensionDir}${manifestFileName} ${buildDir}${manifestFileName}`
);
execSync(`zip -r ${outputs}${chromeOutput} ${buildDir}`);
console.log("***CHROME BUILT SUCCESSFULLY***\n\n");
execSync(`web-ext build -s ${buildDir} -a ${outputs} --overwrite-dest`);
console.log("***FIREFOX BUILT SUCCESSFULLY***");
package.json하여 이 스크립트를 구축 과정의 일부로 실행합니다.스크립트 탭package.json에서 다음과 같이 수정되었습니다."build": "INLINE_RUNTIME_CHUNK=false react-scripts build && node buildPackage.js",
현재
npm run build를 사용하여 구축 스크립트를 트리거하면 프로젝트 루트 디렉토리에 생성된 두 개의 새 파일이 표시됩니다.7단계 - 게시:
크롬:
greetings-chrome.zip 파일 추가(대개 12시간 정도 소요)
불여우:
On this site를 선택하고 계속greetings-1.0.0.zip 파일 추가(대개 6~10분 정도 소요)
마지막 설명:
manifest.json에 추가합니다. "icons": {
"128": "icon_128.png"
},
아시 소니
@ 이아시 소니
어둠의 모드가 당신의 독입니까?minimylist - 새 실시간 업데이트입니다.👨💻👩💻현재 다운로드: Chrome: rb.gy/vdhlo2Firefox: rb.gy/ot5bba
2020년 6월 13일 오전 8:26
1
4
다음에 또 만나요!👋🏻
Reference
이 문제에 관하여(Reactjs를 사용하여 웹 확장 기능 구축 - 0부터 게시까지!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/iyashsoni/building-web-extensions-with-reactjs-from-0-to-publish-54no텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
