2023.03.19 - [All] - 네이버 웹툰 북마크 - CRXJS
네이버 웹툰 북마크 - CRXJS
CRXJS란 오늘은 CRXJS를 소개해보려 한다 https://crxjs.dev/vite-plugin/ Introduction | CRXJS Vite Plugin CRXJS Vite Plugin is a tool that helps you make Chrome Extensions using modern crxjs.dev 이 얼마나 아름다운 울림인가 익스텐션
hbyun.tistory.com
이번 편은 이전 글에서 이어진다 봐야 이번 장을 알거나 이미 세팅된 프로젝트가 있어야 한다
기초 지식
익스텐션은 대충 크게 3가지로 구분할 수가 있다
popup
이건 내가 만든 크롬익스텐션의 버튼을 누르면 뜨는 창이다.
저번 글에서 vite+react라고 타이틀 뜨면서 카운터가 들어간 창이 popup창이다
background
요건 서비스워커라는 js에 등록되어 계속 돌아가면서 데이터를 보내거나 chrome.으로시작하는 함수등 제어 등..
여러 가지를 뒤에서 할 수 있게끔 해준다. 이번 프로젝트에서는 쓰지는 않았는데 잘 쓰면 도움이 무척 될 듯하다
content script
얘야말로 이 익스텐션 만들기의 꽃과 같은 녀석 아닐까
유일하게 DOM에 접근이 가능하게 해 준다
Content script를 적용해 보자
이제 대충 알았으니 적용부터 해보자
저번 프로젝트에서 src폴더에 Content라는 폴더를 만들어주고 안에다가 Content.tsx와 Body.tsx를 만들어준다
그리고 Content.tsx에는 아래와 같이 넣어주자
import { createRoot } from 'react-dom/client';
import Body from './Body';
const body = document.querySelector('body');
const app = document.createElement('div');
app.id = 'root';
if (body) {
body.prepend(app);
}
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<Body />);content sciprt용 DOM ELEMENT를 만들고 만들어진 body에 Body.tsx를 붙인다는 뜻으로 알면 된다
그리고 Body는 아래와 같이 해주자
const Body = () => {
return <span>Hello!</span>;
};
export default Body;
그다음은 manifest에 " content script 여기있소오오 " 하고 알려줘야 한다
manifest.json을 열어서 아래와 같이 수정해 주자
{
"manifest_version": 3,
"name": "CRXJS React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" },
"content_scripts": [
{
"js": ["src/Content/Content.tsx"],
"matches": ["https://*/*"],
"run_at": "document_idle"
}
]
}이렇게 content_script를 추가해 준다
내용은 대충 js는 content.tsx가 될 것이고
matches는 특정 url에서 실행하게 되고 싶다면 특정 url을 여기 넣어준다
자세한 방법은 아래 공식 다큐먼트를 확인하자
https://developer.chrome.com/docs/extensions/mv3/match_patterns/
Chrome Extensions Match patterns - Chrome Developers
How host permission and content script pattern matching works, with examples.
developer.chrome.com
run_at은 페이지의 로딩상태이다 이것도 다큐먼트를 쭉 살펴보자
https://developer.chrome.com/docs/extensions/mv3/content_scripts/#static-declarative
Chrome Extensions content scripts - Chrome Developers
An explanation of content scripts and how to use them in your Chrome Extension.
developer.chrome.com
(표의 run_at을 참고해 보자 간단하게 시작 때, 끝날 때, 유휴상태일 때로 정리된다)
그러고 나서 모든 것을 잘 저장한 뒤에 npm run dev로 다시 켜준다
그리고나서 페이지를 새로고침 하면..
이런 식으로 Hello가 삽입된 것을 볼 수 있다
이걸로 뭘 할 수가 있는가?
이 상태로 DOM을 냅다 조작해 버릴 수 있다
V-DOM에서 붙여버릴 엘리먼트들은 냅다 붙여버리고
필요에 따라서는 document 객체로 접근해서 다른 것들도 다 추가/수정해 버릴 수 있다
원래 혼자 하면서 아득바득 공식 다큐 보면서 해결해보려 했으나
그게 안되어서.. 아래의 링크를 조금 확인했다
https://github.com/yosevu/react-content-script
GitHub - yosevu/react-content-script: React and TypeScript Chrome extension example project for developers to create their own e
React and TypeScript Chrome extension example project for developers to create their own extensions. - GitHub - yosevu/react-content-script: React and TypeScript Chrome extension example project fo...
github.com
사실 이 정도 링크의 템플릿이면 바로 그냥 가져다 써도 괜찮은데..
그래도 하나하나 해보는 맛이 있으니.. 사용자의 결정에 맡기겠다
내일은 Typescript로 bacgkround.js를 야매로 ts적용을 시키는 법을 알아보겠다
'프로그래밍 > 네이버 북마크 크롬 익스텐션' 카테고리의 다른 글
| 네이버 웹툰 북마크 - 심사 끝 (0) | 2023.03.24 |
|---|---|
| 네이버 웹툰 북마크 - 크롬익스텐션을 스토어에 올려보자 (0) | 2023.03.23 |
| 네이버 웹툰 북마크 - Typescript + background 적용 (0) | 2023.03.22 |
| 네이버 웹툰 북마크 - CRXJS (0) | 2023.03.19 |
| 네이버 웹툰 북마크 - 크롬 익스텐션을 만들어보자 (0) | 2023.03.12 |