[TIL 2021.10.23] first-chrome-extension

Kyu·2021년 10월 23일

TIL

목록 보기

285/322

Today I Learned
크롬 익스텐션에서의 프론트엔드와 백엔드의 상호작용

Full code: https://github.com/kyupid/first-chrome-extension

Note

2021-10-23_21-58-42

When you click a link "background page" the console page would pop up and execute a file "background.js" immediately.

And when the refresh button is pressed, new saved file is loaded.

foreground.js는 background.js와 달리 자동으로 실행되지않는다.

Note 2

chrome.tabs.executeScript(null, { file: "./foreground.js" }, () =>
  console.log("test")
);

MDN에 따르면 JavaScrpt APIs 에서 tabs API가 있고 그안에 excuteScript 함수가 있다.
용도는 js코드를 페이지로 inject 하는 것이다
inject 한다는 말은 말그대로 그 자바스크립트를 열린 해당 사이트에서 사용가능하도록 주입한다는 이야기이다.
추가적으로 자바스크립트 js 주입 공격 테스트 및 방지에 대해서 이 링크에서 자세히 볼수있다.

어쨋든 저 코드를 넣고 다시 로드해본다.
그럼 Error 라는 빨갛게 된게 버튼이 뜬다.
이버튼을 클릭하면 콘솔에 나왔던 에러가 그대로 나온다.
로드하면 chrome://extensions에 뭐 주입할수없다 이런 이야기인듯 하다.

Note 3

chrome.tabs.onActivated.addListener((tab) => {
  console.log(tab);
});

background.js에 위 코드를 넣고 실행하고 background 콘솔을 보면
탭을 클릭할때마다 background가 뭔가 계속 listening 하는것을 볼수있다.
이걸로 어떤 도메인에 있는지 알 수가 있음.

Note 4

chrome.tabs.onActivated.addListener((tab) => {
  chrome.tabs.get(tab.tabId, (current_tab_info) => {
    if (/^https:\/\/www\.google/.test(current_tab_info.url)) {
      chrome.tabs.executeScript(null, { file: "./foreground.js" }, () =>
        console.log("i injected")
      );
    }
  });
});

코드 해석: 구글 홈페이지이면 foreground.js 를 실행한다. i injected는 background.js에서 나타남.

아래 이미지 참고

2021-10-23_22-56-35

Note 5

// background.js

chrome.tabs.onActivated.addListener((tab) => {
  chrome.tabs.get(tab.tabId, (current_tab_info) => {
    if (/^https:\/\/www\.google/.test(current_tab_info.url)) {
      chrome.tabs.insertCSS(null, { file: "./mystyle.css" });
      chrome.tabs.executeScript(null, { file: "./foreground.js" }, () =>
        console.log("i injected")
      );
    }
  });
});

// foreground.js

document.querySelector(".rSk4se img").classList.add("spinspinspin");

이미지 돌리는 css 만들고 querySelecter.classList.add해서 이미지 돌리는 클래스를 넣는다.

Oct-23-2021 23-17-30

Note 6

2021-10-23_23-28-29

option이랑 popup은 위 이미지에 있는거 클릭하면나온다

extension 아이콘을 누르면 popup이고 option은 deatils 항목에 들어가서 저걸 누르면 된다

Note 7

백엔드와 프론트엔드.

설명:

foregrounds.js 에서 first button을 클릭했을때 local storage에 password: "123"을 저장한다.
second button을 클릭했을 때 runtime에서 Message를 보낸다
background.js 에서 request.message가 second button에서 보낸 message가 같으면 local storage에서 "password"를 get 한다.

2021-10-23_23-53-35
2021-10-23_23-52-47