이 게시물에서는 콘텐츠 스크립트와 이를 사용하여 웹 페이지를 변경하는 방법에 초점을 맞출 것입니다.

살펴볼 주요 개념은 다음과 같습니다.

• 콘텐츠 스크립트를 사용하여 웹 페이지를 변경합니다.
  -, HTML 첨부
  -, 새로운 스타일 추가
• 백그라운드 스크립트와 콘텐츠 스크립트간에 메시지 보내기
• 콘텐츠 스크립트에서 확장 리소스에 액세스

예 

이 게시물의 예에서는 초기 샘플 확장에 기능을 계속 추가하겠습니다. 콘텐츠 스크립트를 사용하여 현재 활성화 된 페이지의 오른쪽 하단에 알림을 표시합니다.

또한 이 시리즈에서 이전에 배운 내용에 의존 할 것입니다. 명령은 알림을 트리거하여 백그라운드 스크립트에서 처리합니다. 마지막으로 백그라운드 스크립트는 콘텐츠 스크립트에 메시지를 보내 화면 오른쪽 하단에 페이지 제목을 표시하는 알림을 활성화합니다.

콘텐츠 스크립트 정보 

• 콘텐츠 스크립트는 사용자가 방문한 웹 페이지와 동일한 컨텍스트에서 실행되는 파일입니다.
• 페이지의 DOM과 액세스를 공유합니다.
• 이러한 스크립트 내에서 JavaScript를 사용하여 웹 페이지 요소에 액세스하고 해당 내용을 읽고 변경할 수 있습니다. 그리고 CSS를 사용하여 웹 페이지에 새로운 스타일을 추가 할 수 있습니다.
• 페이지에서 정보를 추출하여 다른 스크립트로 보내거나 확장 프로그램에서 메시지를 받을 수 있습니다.
• 마지막으로 콘텐츠 스크립트는 일부 Chrome API에 액세스 할 수 있으므로 현재 URL 가져 오기, 확장 프로그램의 저장소 액세스 등과 같은 작업을 수행 할 수 있습니다.

코딩하자! 

1. 새 명령 만들기 

이 시리즈의 이전 게시물에서 예제 확장에 두 개의 명령을 추가했습니다. 이제 우리는 세 번째를 추가 할 것입니다. 이를 위해 먼저 명령을 정의하고 manifest.json 파일에 제안 된 바로 가기를 정의합니다.

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    // ...
    "commands": {
        "bark": {
            "suggested_key": {
                "default": "Alt+Shift+3"
            },
            "description": "Makes Acho bark the title at the bottom right of the current page."
        },
        // .... Other commands
    }
}

이제 onCommand 이벤트를 수신하여 명령을 처리해야 합니다. 이것은 백그라운드 스크립트에서 수행되어야 합니다.

// background.js

chrome.commands.onCommand.addListener(function (command) {
    switch (command) {
        case 'bark':
            barkTitle();
            break;
        default:
            console.log(`Command ${command} not found`);
    }
});

function barkTitle() {
    const query = { active: true, currentWindow: true };
    chrome.tabs.query(query, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, {
            tabTitle: tabs[0].title
        });
    });
}

따라서 bark 명령이 실행되면 현재 활성화 된 탭의 제목을 나타내는 메시지를 보냅니다. 이제 콘텐츠 스크립트는 해당 메시지를 듣고 알림을 표시해야 합니다.

메시지 정보 : 콘텐츠 스크립트는 확장의 컨텍스트가 아니라 웹 페이지의 컨텍스트에서 실행됩니다. 확장 프로그램과 통신 할 방법이 필요합니다. 메시지를 사용하여 그렇게 할 수 있습니다.

• 콘텐츠 스크립트에 메시지를 보내려면 chrome.tabs.sendMessage를 사용하고 TabId를 지정하세요. 메시지는 해당 탭에서 실행 중인 콘텐츠 스크립트로 전송됩니다.
• 콘텐츠 스크립트에서 메시지를 보내려면 chrome.runtime.sendMessage를 사용하세요.

2. 콘텐츠 스크립트 등록 

콘텐츠 스크립트를 만들기 위해 가장 먼저 해야 할 일은 (예, 짐작할 수 있습니다!) manifest.json 파일에 추가하는 것입니다.

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    // ... 
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "css": ["content.css"]
        }
    ],
    "web_accessible_resources": [
        "images/icon32.png"
    ],
}

• content_scripts : 콘텐츠 스크립트의 배열. 각기 다른 구성으로 여러 스크립트를 등록 할 수 있습니다.
• match :이 특정 콘텐츠 스크립트를 삽입 할 페이지를 지정하는 문자열 식의 배열입니다. "matches": [ "<all_urls>"]를 사용하여 모든 URL에 삽입 할 수 있습니다.
• js : 자바 스크립트 파일의 배열입니다. 이 파일은 콘텐츠 스크립트의 로직을 처리합니다.
• css : CSS 파일의 배열. 이 경우 CSS 파일을 사용하여 알림 스타일을 정의합니다.
• web_accessible_resources : 콘텐츠 스크립트에서 액세스해야 하는 리소스 목록입니다. 콘텐츠 스크립트는 확장과 다른 컨텍스트에서 실행되므로 액세스하려는 확장 리소스는 여기에서 명시 적으로 사용할 수 있어야 합니다.

3. 알림 표시 

content.js에 로직을 추가하는 것으로 시작하겠습니다.

// Notification body.
const notification = document.createElement("div");
notification.className = 'acho-notification';

// Notification icon.
const icon = document.createElement('img');
icon.src = chrome.runtime.getURL("images/icon32.png");
notification.appendChild(icon);

// Notification text.
const notificationText = document.createElement('p');
notification.appendChild(notificationText);

// Add to current page.
document.body.appendChild(notification);

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

    const notification = document.getElementsByClassName('acho-notification')[0];
    const notificationText = notification.getElementsByTagName('p')[0];

    notificationText.innerHTML = request.tabTitle;

    notification.style.display = 'flex';

    setTimeout(function () {
        notification.style.display = 'none';
    }, 5000);

    return true;
});

이제 이전 코드를 더 자세히 살펴 보겠습니다.

• 먼저 알림 본문이 될 div를 만듭니다. 또한 나중에 스타일을 정의하는 데 도움이 되는 클래스를 할당합니다.
• 그런 다음 이전 div에 img를 첨부합니다. 그러면 확장 프로그램 아이콘이 알림 상자에 추가됩니다.
  -, 확장 프로그램의 아이콘을 얻으려면 chrome.runtime.getURL을 사용해야 합니다. 콘텐츠 스크립트는 확장 프로그램과 동일한 컨텍스트에서 실행되지 않으므로 확장 프로그램의 리소스에 직접 액세스 할 수 없습니다. 이것이 우리가 웹에서 액세스 할 수 있는 리소스로 manifest.json에 icon32.png 파일을 추가 한 이유이기도 합니다.
• 다음으로 나중에 알림 텍스트를 첨부 할 p 요소를 추가합니다.
• 마지막으로 웹 페이지 본문에 알림을 추가합니다.

이 처음 15 줄은 로드 된 모든 페이지가 알림 구조를 갖도록 합니다. 마지막으로 알림을 표시하기 위해 chrome.runtime.onMessage에 대한 리스너를 추가했습니다. 해당 코드를 살펴 보겠습니다.

• 메시지를 받으면 가장 먼저 해야 할 일은 현재 웹 페이지에서 알림의 구조를 찾는 것입니다. document.getElementsByClassName을 사용하여 알림의 본문을 가져오고 거기에서 getElementsByTagName을 사용하여 그 안에 p 요소를 가져옵니다.
• background.js 스크립트에서 보낸 메시지에는 tabTitle이 포함되어 있으므로 request.tabTitle의 해당 값을 사용하여 알림 텍스트 요소의 콘텐츠로 설정합니다.
• display 속성을 flex로 설정하여 알림이 표시되도록 합니다.
• 마지막으로 setTimeout을 사용하여 5 초 후에 알림을 다시 숨 깁니다.

큰! 거의 완료되었습니다. content.css 파일의 알림에 몇 가지 스타일을 추가해 보겠습니다.

.acho-notification {
    background-color: white;
    border: rgb(242, 105, 77) 1px solid;
    border-radius: 5px;
    font-size: medium;
    width: 320px;
    display: none;
    padding: 8px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    align-items: center;
}

.acho-notification > img {
    margin-right: 12px;
}

Done! 

그리고 그게 다야! 다음은 사용자가 Alt + Shift + 3을 눌렀을 때 알림이 표시되는 방식입니다.

저장소 

이 저장소를 모든 Chrome 확장 프로그램 예제로 업데이트하고 있습니다.

https://dev.to/paulasantamaria/chrome-extensions-making-changes-to-a-web-page-1n5f