Chrome 확장 프로그램을 빌드하는 방법
6044 단어 webdevreactjavascript
Chrome 확장 프로그램 매니페스트 버전 3이 출시되었습니다!
쉽게 따라할 수 있는 동영상 강의를 보려면 CHROME EXTENSION V3 과정을 확인하십시오.
저희 newsletter 에 가입하시면 구매가의 20% 할인을 받으실 수 있습니다!
Chrome 확장 프로그램에는 5가지 부분이 있습니다.
. . .
1.
모든 것은 'manifest.json' 파일로 시작됩니다.
확장 프로그램이 사용자의 브라우저와 상호 작용하는 방법, 위치 및 시기는 모두 매니페스트에 포함되어 있습니다.
매니페스트는 백그라운드 스크립트, 팝업 및 옵션 페이지뿐만 아니라 크롬 확장의 이름, 버전 및 설명을 설정합니다.
또한 전경 스크립트를 삽입할 수 있는 위치를 설정합니다(자세한 내용은 나중에...).
{
"name": "obj ext",
"description": "my ext",
"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",
"https://www.google.com/*",
"storage"
]
}
2.
백그라운드 스크립트('background.js')는 확장 프로그램이 설치되거나 사용자가 확장 프로그램을 수동으로 새로 고치면 실행되는 JavaScript 스크립트입니다.
이것은 주목해야 할 중요한 사항입니다.
백그라운드 스크립트는 실제로 사용자가 보고 있는 웹 페이지에 대한 액세스 권한이 없으므로 백그라운드 스크립트는 DOM을 조작할 수 없습니다.
So how do we get our chrome extension to do stuff on the user's webpage then?
전경 스크립트가 들어오는 곳입니다.
우리의 백그라운드 스크립트는 원하는 경우 CSS뿐만 아니라 포그라운드 스크립트를 페이지에 삽입하는 기능이 있습니다.
이것이 Chrome 확장 프로그램으로 웹페이지의 DOM을 조작하는 방법입니다.
How do we inject our foreground script into the foreground?
background.js 스크립트에서...
let active_tab_id = 0;
chrome.tabs.onActivated.addListener(tab => {
chrome.tabs.get(tab.tabId, current_tab_info => {
active_tab_id = tab.tabId;
if (/^https:\/\/www\.google/.test(current_tab_info.url)) {
chrome.tabs.insertCSS(null, { file: './mystyles.css' });
chrome.tabs.executeScript(null, { file: './foreground.js' }, () => console.log('i injected'))
}
});
});
...우리가 탭으로 무엇을 하는지 지켜보는 리스너가 있습니다.
현재 있는 탭이 Google 홈페이지인 경우 해당 탭에 스크립트를 삽입합니다.
'null'은 현재 보고 있는 탭을 나타냅니다.
거기에서 우리의 foreground.js 스크립트는 index.html 페이지에 영향을 미치는 다른 스크립트처럼 작동합니다.
창과 문서(DOM)에 액세스할 수 있습니다.
원하는 경우 Google 홈페이지의 로고를 회전시킬 수 있습니다.
삼.
'foreground.js'에서 우리는 ...
document.querySelector('#hplogo').classList.add('spinspinspin');
...'mystyles.css'에 우리가 작성하는...
.spinspinspin {
animation-name: spin;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(1440deg);
}
}
...그렇게 Google 홈페이지로 이동하면 전경 스크립트가 삽입되고 해당 로고가 회전합니다.
4.
'popup.html' 페이지는 선택 사항입니다.
팝업 페이지는 사용자가 오른쪽 상단에 있는 확장 프로그램 아이콘을 클릭할 때 표시되는 페이지입니다.
원하는 경우 스크립트가 첨부된 html 페이지입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>I'm the popup</h1>
<script></script>
</body>
</html>
5.
'options.html' 페이지는 팝업 페이지와 같습니다.
사용자가 확장 프로그램 탭으로 이동하여 옵션을 클릭할 때 표시되는 것입니다.
원하는 경우 스크립트가 첨부된 html 페이지이기도 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>I'm the options</h1>
<script></script>
</body>
</html>
. . .
Google 크롬 확장 프로그램을 하나로 묶는 것은 프론트엔드와 백엔드처럼 배경과 전경 사이의 관계입니다.
전경이 배경과 통신하는 방법 및 Chrome 확장 프로그램의 상태 관리를 포함하여 보다 심층적인 가이드를 확인하려면 YouTube에서 전체 비디오 자습서 An Object Is A를 확인하십시오.
Chrome 확장 프로그램을 빌드하는 방법(2020 웹 개발)
. . .
React Chrome 확장 프로그램을 사용할 준비가 되셨습니까?
여기에서 확인하십시오.
ReactJS를 사용하여 Chrome 확장 프로그램 빌드
an-object-is-a · Sep 26 '20 · 6분 읽기
#javascript
#react
#webdev
Reference
이 문제에 관하여(Chrome 확장 프로그램을 빌드하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/anobjectisa/how-to-build-a-chrome-extension-4oig텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
