[크롬 확장 프로그램] Jquery 라이브러리 사용하기

최근에 크롬 확장 프로그램 공부를 하고 있습니다.

 

하던 도중 페이지에 대한 정보를 조금 더 편리하게 가져오기 위해 Jquery를 같이 사용하는 법을 공부했습니다.

---

1. Jquery 파일 다운로드

Jquery 공식 홈페이지를 통해 Jquery 파일을 다운로드 받습니다.

https://jquery.com/download/

 

2. Manifest.json 파일 수정

저 같은 경우, Jquery 파일을 thirdParty 폴더에 넣어 관리를 하고 있습니다.

해당 경로를 배열 형태로 Javascript 파일과 같이 작성해줍니다.

{
	"background": {
        "service_worker": ["thirdParty/jquery.min.js", "background.js"],
        "type": "module"
    },
	...
    "content_scripts": [
        {
            "js": ["thirdParty/jquery.min.js", "scripts/content.js"],
            "matches": [
                "https://website/*"
            ]
        }
    ]
}

 

 

3. 테스트

 

예제 사이트 : https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-reading-time/

 

해당 사이트의 헤더 텍스트 크롤링

 

헤더 텍스트

 

manifest.json

{
	...
    "content_scripts": [
        {
            "js": ["thirdParty/jquery.min.js", "scripts/content.js"],
            "matches": [
                "https://developer.chrome.com/docs/extensions/*"
            ]
        }
    ]
}

 

 

scripts/content.js

$(function() {
    let head = $(".type--h2 p").text();
    alert(head);
});

 

결과