이 기사에서는 브라우저 확장 기능이 무엇인지, 어떻게 작동하는지, 직접 구축할 수 있는 방법에 대해 설명합니다.
버튼 하나만 클릭하면 모든 코드 조각을 클립보드에 복사할 수 있는 확장 기능(Super Fun!)을 실제로 작성하여 마치겠습니다.
이 기사를 계속하려면:
- 자바스크립트에 대한 기본적인 이해가 필요합니다.
- Firefox 브라우저가 필요합니다(또는 다른 브라우저도 작동함)
브라우저 확장이란 무엇입니까?
브라우저 확장 프로그램은 브라우저에 추가하여 브라우저 용량을 확장하여 브라우징 경험을 향상시키는 것입니다.
예를 들어 기기에 설치했을 수 있는 광고 차단기를 생각해 보십시오. 이렇게 하면 웹 서핑을 할 때 광고를 차단하여 더 나은 검색 환경을 제공합니다.
자신만의 기본 브라우저 확장 프로그램을 작성하는 방법
이제 아주 기본적인 확장 프로그램을 작성하는 것으로 시작하겠습니다.
시작하려면 manifest.json라는 파일을 만드는 폴더를 만듭니다. .
매니페스트 파일이란 무엇입니까?
매니페스트 파일은 모든 브라우저 확장의 필수 파일입니다. 이 파일에는 이름, 버전 등과 같은 확장에 대한 기본 데이터가 포함되어 있습니다.
이제 manifest.json 내부 파일 복사 다음 스니펫:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
}
확장 파일 로드 방법
Firefox 사용자의 경우 다음 단계를 따르세요.
주소 표시줄에서 다음을 검색하십시오.
about:debugging#/runtime/this-firefox
임시 추가 기능 로드 옵션이 표시됩니다. . 해당 옵션을 클릭하고 manifest.json를 선택하십시오. 디렉토리에서 파일.
Chrome 사용자:
주소 표시줄에서 다음을 검색하십시오.
chrome://extensions.- 개발자 모드를 활성화하고 전환합니다.
- Unpacked 로드 버튼을 클릭하고 확장 디렉토리를 선택합니다.
만세! 확장 프로그램을 성공적으로 설치했습니다. 그러나 확장 프로그램은 현재 아무 것도 하지 않습니다. 이제 확장에 몇 가지 기능을 추가해 보겠습니다. 이를 위해 manifest.json 다음과 같은 파일:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["main.js"]
}
]
}
위의 코드에서 manifest.json에 콘텐츠 스크립트를 추가했습니다. . 콘텐츠 스크립트는 웹 페이지의 문서 개체 모델을 조작할 수 있습니다. 콘텐츠 스크립트를 사용하여 웹 페이지에 JS(및 CSS)를 삽입할 수 있습니다.
"matches" 콘텐츠 스크립트를 추가해야 하는 도메인 및 하위 도메인 목록과 js을 포함합니다. 로드할 JS 파일의 배열입니다.
이제 동일한 디렉토리 내에서 main.js을 만듭니다. 파일에 다음 코드를 추가하세요.
alert("The test extension is up and running")
이제 확장을 다시 로드하고 URLs을 방문할 때 경고 메시지가 표시됩니다.
코드를 수정할 때마다 확장 프로그램을 다시 로드하는 것을 잊지 마십시오.
브라우저 확장 프로그램을 사용자 정의하는 방법
이제 확장 프로그램을 좀 더 재미있게 즐기세요.
이제 우리가 방문하는 웹 페이지의 모든 이미지를 선택한 이미지로 변경하는 웹 확장 프로그램을 만들 것입니다.
이를 위해 현재 디렉토리에 이미지를 추가하고 main.js을 변경하십시오. 파일:
console.log("The extension is up and running");
var images = document.getElementsByTagName('img')
for (elt of images){
elt.src = `${browser.runtime.getURL("pp.jpg")}`
elt.alt = 'an alt text'
}여기에서 무슨 일이 일어나는지 봅시다:
var images = document.getElementsByTagName('img')
이 코드 줄은 img가 있는 웹 페이지의 모든 요소를 선택합니다. 태그 .
그런 다음 src를 변경하는 for 루프를 사용하여 배열 이미지를 반복합니다. 모든 img 속성 runtime.getURL의 도움으로 URL에 요소 기능.
여기 pp.jpg 내 장치의 현재 디렉토리에 있는 이미지 파일의 이름입니다.
콘텐츠 스크립트에 pp.jpg에 대해 알려야 합니다. manifest.json을 편집하여 파일 파일:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["main.js"]
}
],
"web_accessible_resources": [
"pp.jpg"
]
}
그런 다음 확장 프로그램을 다시 로드하고 원하는 URL을 방문하세요. 이제 모든 이미지가 현재 작업 디렉토리에 있는 이미지로 변경되는 것을 볼 수 있습니다.
확장 프로그램에 아이콘을 추가하는 방법
manifest.json에 다음 코드를 추가합니다. 파일:
"icons": {
"48": "icon-48.png",
"96": "icon-96.png"
}
확장 프로그램에 도구 모음 버튼을 추가하는 방법
이제 브라우저의 도구 모음에 있는 버튼을 추가합니다. 사용자는 이 버튼을 사용하여 확장 프로그램과 상호 작용할 수 있습니다.
도구 모음 버튼을 추가하려면 manifest.json에 다음 줄을 추가하세요. 파일:
"browser_action":{
"default_icon":{
"19":"icon-19.png",
"38":"icon-38.png"
}
}모든 이미지 파일은 현재 디렉토리에 있어야 합니다.
이제 확장 프로그램을 다시 로드하면 브라우저 도구 모음에 확장 프로그램 아이콘이 표시됩니다.
도구 모음 버튼에 대한 수신 이벤트를 추가하는 방법
사용자가 버튼을 클릭할 때 무언가를 하고 싶을 수도 있습니다. 버튼을 클릭할 때마다 새 탭을 열고 싶다고 가정해 보겠습니다.
이를 위해 manifest.json에 다음을 다시 추가합니다. 파일:
"background":{
"scripts":["background.js"]
},
"permissions":[
"tabs"
]
그런 다음 background.js라는 새 파일을 만듭니다. 현재 작업 디렉토리에서 파일에 다음 행을 추가하십시오.
function openTab(){
var newTab = browser.tabs.create({
url:'https://twitter.com/abhilekh_gautam',
active:true
})
}
browser.browserAction.onClicked.addListener(openTab)
이제 확장 프로그램을 새로고침하세요!
누군가 버튼을 클릭할 때마다 openTab을 호출합니다. 내 트위터 프로필에 연결되는 URL이 있는 새 탭을 여는 기능. 또한 활성 키는 true로 설정하면 새로 생성된 탭을 현재 탭으로 만듭니다.
백그라운드 스크립트에서 브라우저에서 제공하는 API를 사용할 수 있습니다. API에 대한 자세한 내용은 다음 문서를 참조하세요. Javacript API.
이제 브라우저 확장 프로그램의 기본 사항을 배웠으므로 개발자가 일상 생활에서 사용할 수 있는 확장 프로그램을 만들어 보겠습니다.
최종 프로젝트
자, 이제 일상생활에서 유용하게 쓸 수 있는 글을 써보도록 하겠습니다. 클릭 한 번으로 StackOverflow에서 코드 조각을 복사할 수 있는 확장 프로그램을 만들 것입니다. 따라서 확장 프로그램은 Copy을 추가합니다. 버튼을 클릭하면 코드가 클립보드에 복사됩니다.
데모
![자신의 브라우저 확장을 작성하는 방법 [예제 프로젝트 포함]](/article/uploadfiles/202210/2022101315381039.png)
먼저 새 폴더/디렉토리를 만들고 그 안에 manifest.json을 추가합니다. 파일.
파일에 다음 코드를 추가합니다.
{
"manifest_version":2,
"version":"1.0",
"name":"copy code",
"content_scripts":[
{
"matches":["*://*.stackoverflow.com/*"],
"js":["main.js"]
}
]
}
matches를 보십시오. content script 내부 – 확장은 StackOverflow의 도메인 및 하위 도메인에서만 작동합니다.
이제 main.js이라는 다른 JavaScript 파일을 만듭니다. 같은 디렉토리에 다음 코드 줄을 추가합니다.
var arr =document.getElementsByClassName("s-code-block")
for(let i = 0 ; i < arr.length ; i++){
var btn = document.createElement("button")
btn.classList.add("copy_code_button")
btn.appendChild(document.createTextNode("Copy"))
arr[i].appendChild(btn)
//styling the button
btn.style.position = "relative"
if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
btn.style.left = `${arr[i].offsetWidth - 70}px`
else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
btn.style.left = `${arr[i].offsetWidth - 200}px`
else
btn.style.left = `${arr[i].offsetWidth - 150}px`
if(arr[i].scrollHeight === arr[i].offsetHeight)
btn.style.bottom = `${arr[i].offsetHeight - 50}px`
else
btn.style.bottom = `${arr[i].scrollHeight - 50}px`
//end of styling the button
console.log("Appended")
}
먼저 클래스 이름이 s-code-block인 모든 요소를 선택했습니다. – 하지만 왜? StackOverflow의 사이트를 조사했을 때 모든 코드 조각이 해당 이름의 클래스에 보관되어 있다는 것을 발견했기 때문입니다.
그런 다음 모든 요소를 반복하고 해당 요소에 버튼을 추가합니다. 마지막으로 버튼을 적절하게 배치하고 스타일을 지정하면 됩니다(스타일링은 아직 완벽하지 않습니다. 이제 시작일 뿐입니다).
위에서 진행한 프로세스를 사용하여 확장 프로그램을 로드하고 StackOverflow를 방문하면 복사 버튼이 표시되어야 합니다.
버튼에 기능을 추가하는 방법
이제 버튼을 클릭하면 전체 스니펫이 클립 보드에 복사되기를 원합니다. 이렇게 하려면 main.js에 다음 코드 줄을 추가합니다. 파일:
var button = document.querySelectorAll(".copy_code_button")
button.forEach((elm)=>{
elm.addEventListener('click',(e)=>{
navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
alert("Copied to Clipboard")
})
})
먼저 querySelectorAll를 사용하여 사이트에 추가한 모든 버튼을 선택합니다. . 그런 다음 버튼을 클릭할 때마다 클릭 이벤트를 수신합니다.
navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
위의 코드 줄은 코드를 클립보드에 복사합니다. 스니펫이 복사될 때마다 Copied to clipboard 메시지로 사용자에게 알립니다. 그리고 우리는 끝났습니다.
최종 단어
웹 확장은 다양한 방식으로 유용할 수 있으며 이 기사의 도움으로 자신만의 확장을 작성할 수 있기를 바랍니다.
모든 코드는 이 GitHub 리포지토리에서 찾을 수 있습니다. 멋진 스타일이나 클립보드 기록 및 기타 기능과 같은 새로운 기능이 떠오를 때마다 풀 리퀘스트를 제공하는 것을 잊지 마십시오.
즐거운 코딩!