minimimi

[크롬 확장프로그램 개발]01. popup과 background에서 local 저장소 사용하기 (chrome.storage.local) 본문

프로그래밍 공부/크롬 확장프로그램 개발

[크롬 확장프로그램 개발]01. popup과 background에서 local 저장소 사용하기 (chrome.storage.local)

99mini 2023. 3. 25. 19:50
반응형

크롬 확장프로그램에서 popup과 background에서 chrome.storage api를 이용하여 local 저장소에 값을 저장하는 법을 알아보겠습니다.

이전 세팅 코드는 아래를 확인해주세요.

2023.03.24 - [프로그래밍 공부/크롬 확장프로그램 개발] - [크롬 확장프로그램]00.개발환경 세팅 및 개발자 모드로 실행시키기

 

[크롬 확장프로그램]00.개발환경 세팅 및 개발자 모드로 실행시키기

크롬 확장 프로그램 개발 세팅을 위한 파일 구성과 개발자 모드에서 실행시키는 방법을 소개합니다. 크롬 확장 프로그램이 manifest V3로 업데이트 되면서 api와 manifest.json 작성법이 바뀌어서 검색

zero-rabbit.tistory.com

변경된 파일 구조

chrome-extension-study/
├── manifest.json
└── src/
    ├── scripts/
    │   └── background.js
    └── popup/
        ├── popup.html
        ├── popup.css
        └── popup.js

파일을 관리하기 위해서 src 폴더아래에 필요한 파일을 저장하였습니다.

manifest.json 파일

{
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "chrome-extension-study",
  "description": "테스트 코드",
  "background": { "service_worker": "src/scripts/background.js" },
  "permissions": ["storage"],
  "action": {
    "default_popup": "src/popup/popup.html"
  }
}
  • "background": { "service_worker": "src/scripts/background.js" }
    background에서 실행되는 서비스 워커로 background.js를 등록합니다.
  • "permissions": ["storage"]
    chrome.storage api를 사용하기 위해 storage 권한을 등록합니다.

설정이 잘 되면 뷰 검사: 서비스 워커 버튼이 활성화 됩니다.

popup.html 파일

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Popup</title>
    <link rel="stylesheet" href="popup.css" /> <!-- popup.css 연결 -->
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="popup.js"></script> <!-- popup.js 연결 -->
  </body>
</html>

popup.js 파일

console.log("hello popup");

background.js 파일

console.log("hello background");

popup.js와 background.js가 잘 작동하는 지 확인해봅니다.

서비스 워커를 클릭하면 DevTools 창이 나옵니다. Console 창으로 이동하면 결과가 잘 나오는 것을 확인할 수 있을 겁니다.

이제 확장 프로그램을 실행하여 우클릭 후 "검사"를 클릭하여 popup의 개발자 도구를 열어서 Console을 확인합니다.

먼저 background.js 가 실행되고 popup.js가 다음으로 실행되는 것을 확인할 수 있습니다.

chorme.storage Api 사용하기

chrome.storage.local의 set,get 메서드를 사용할 것입니다.
chrome.storage.local.set 과 chrome.storage.local.get은 확장 프로그램의 로컬 저장소 영역에서 하나 이상의 항목을 검색할 수 있는 Chrome 확장 프로그램 API의 메서드입니다. 로컬 저장소 영역은 확장 내에서 데이터를 지속적으로 저장하는 데 사용할 수 있는 키-값 저장소입니다.

우선 background.js에서 아래의 코드를 추가합니다.

/**
 * chrome local 저장소에 {key: value} 형태로 저장하기
 * @param {string} key
 * @param {string} value
 */
function setStorage(key, value) {
  let setObj = {};
  setObj[key] = value;
  chrome.storage.local.set(setObj);
}

setStorage("testKey", "testValue");
chrome.storage.local.get("testKey", function (result) {
    console.log(result);
});

setStorage 메서드를 정의해서 key와 value를 전달받아 chrome.storage.local.set를 통해 데이터를 저장합니다. 그리고 chrome.storage.local.get을 호출하여 저장한 데이터를 불러와 콘솔에 출력합니다.

chrome.storage.local.get은 비동기 메서드이므로 데이터를 검색하려면 콜백 함수를 사용해야 합니다. 지금은 키값을 하나만 문자열로 넘겨 주었지만 한 번에 여러 항목을 검색하려는 경우 개체 대신 get 메서드에 키 배열을 전달할 수 있습니다. 항목이 로컬 저장소 영역에 없으면 result 객체의 값은 undefined가 됩니다.

// 문자열 리스트를 넘겨주는 예제
var keys = ["foo", "bar"];

chrome.storage.local.get(keys, function(result) {
  console.log(result.foo);
  console.log(result.bar);
});

backgrond.js 에서 저장한 데이터를 popup.js 도 마찮가지로 호출할 수 있습니다.

popup.js 파일

chrome.storage.local.get("testKey", function (result) {
  console.log("At popup: ");
  console.log(result);
});

소스 코드는 아래 github에서 공개해두었습니다.

https://github.com/99mini/chrome-extension-study

 

GitHub - 99mini/chrome-extension-study: 크롬 확장프로그램 공부하기

크롬 확장프로그램 공부하기. Contribute to 99mini/chrome-extension-study development by creating an account on GitHub.

github.com

 

반응형
저작자표시

'프로그래밍 공부 > 크롬 확장프로그램 개발' 카테고리의 다른 글

[크롬 확장프로그램 개발]00.개발환경 세팅 및 개발자 모드로 실행시키기  (0) 2023.03.24
'프로그래밍 공부/크롬 확장프로그램 개발' Related Articles more