Chrome 확장 프로그램 복사 및 검색

5362 단어 webdevjavascriptcodenewbie

Chrome 확장 프로그램 복사 및 검색




이 가이드에서는 Chrome 확장 프로그램의 작동 방식을 알고 있다고 가정합니다.



경험이 풍부한 웹 개발자? 빠르고 무료인 YouTube 튜토리얼을 확인하세요.








런다운



사용자가 검색 엔진을 선택할 수 있는 간단한 HTML 페이지가 있습니다. 이 페이지는 Chrome 확장 프로그램의 팝업이 됩니다.

포그라운드 스크립트에서 우리는 사용자가 텍스트를 복사할 때를 들을 것입니다. 그럴 때 배경 스크립트가 적절한 URL 및 검색 매개변수로 새 항목을 열게 됩니다.

시작하자.


우리의 manifest.json



특별한 것은 없습니다.




{
    "name": "Clipboard Search",
    "manifest_version": 2,
    "description": "Testing clipboard functionality.",
    "version": "0.0.0",
    "background": {
        "scripts":["background.js"]
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}



필요한 유일한 권한은 포그라운드 스크립트를 특정 탭에 삽입할 수 있는 탭과 포그라운드 스크립트를 특정 웹 페이지에 삽입할 수 있는 입니다.


popup.html



간단한 웹 페이지.



여기에는 복잡한 것이 없습니다.

옵션이 있는 선택, 제출 버튼, 선택한 검색 엔진을 표시하는 div가 있습니다.

<div class="container">
    <div class="section1">
        <select name="search_engine" id="search_engine">
            <option value="" disabled selected>Choose a search engine</option>
            <option value="google">Google</option>
            <option value="startpage">Start Page</option>
            <option value="duckduckgo">Duck Duck Go</option>
            <option value="ecoasia">Ecoasia</option>
            <option value="bing">Bing</option>
        </select>
        <button>Select</button>
    </div>
    <div class="section2">
        <div class="search_engine_choice">Your Current Search Engine</div>
    </div>
</div>



다음은 우리가 가진 것입니다.




전경 스크립트



여기에는 많은 코드가 없습니다.




document.addEventListener('copy', () => {
    navigator.clipboard.readText()
        .then(res => {
            chrome.runtime.sendMessage({
                message: 'search',
                payload: `"${res}"`
            });
        })
        .catch(err => console.log(err));
});



복사 이벤트에 대한 리스너를 만듭니다. 트리거되면 readText() 메서드를 사용하여 클립보드에서 복사된 자료를 가져옵니다.

그런 다음 복사한 텍스트를 chrome.runtime.sendMessage() 메서드를 사용하여 백그라운드 스크립트로 보냅니다.


배경 스크립트



확장의 대부분이 작성되는 곳입니다.



여기에 모든 검색 엔진 문자열을 포함하는 객체가 있습니다.

const search_engines = {
    google: 'https://www.google.com/search?q=',
    startpage: 'https://www.startpage.com/do/dsearch?query=',
    duckduckgo: 'https://duckduckgo.com/?q=',
    ecoasia: 'https://www.ecosia.org/search?q=',
    bing: 'https://www.bing.com/search?q='
}


Chrome 확장 프로그램이 사용자가 새 탭을 연 것을 감지하면 포그라운드 스크립트를 해당 페이지에 삽입합니다.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (/^http/.test(tab.url) && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(tabId, { file: './scripts/foreground.js' }, () => {
            console.log('The foreground script has been injected.');
        });
    }
});



백그라운드 리스너에서는 포그라운드에서 "검색"이라는 메시지를 듣습니다.

그것을 받으면 사용자를 위해 새 탭을 엽니다.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.message === 'save_search_engine') {
        current_search_engine = request.payload;
        sendResponse({ message: 'success' });
    } else if (request.message === 'get_current_search_engine') {
        sendResponse({ payload: current_search_engine });
    } else if (request.message === 'search') {
        chrome.tabs.create({
            active: true,
            url: `${search_engines[current_search_engine]}${request.payload}`
        });
    }
});



url 속성에 선택한 검색 엔진과 문자열로 수정된 검색 용어인 request.payload로 구성된 값이 어떻게 있는지 확인하십시오.


이것이 이 확장 프로그램의 기본 작동 방식입니다.



소스 파일here을 얻거나 아래에서 비디오 자습서를 볼 수 있습니다.


보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.



Chrome 확장 프로그램 복사 및 검색
기존 Type Script 항목을 조금씩 strict로 변경
Axios 작업 확인

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage