요즘 크롬 익스텐션 만들기에 맛들렸습니다.
3가지정도 만드니깐 이제 아이디어가 고갈났습니다. 필요한건 다 만들었다
그래서 주변사람에게서 아이디어를 제공받았습니다.
아 저같은 사람이 주변에 있다면 전 정말 행복할것같습니다. 행복하세요~~
리퀘스트 내용
클립스튜디오라는 페인팅 툴에 쓰이는 브러쉬, 소재들을 다운받는 사이트가 있습니다.
여기에 무료소재 랭킹이 있는데
보시다시피 무료 아닌것들도 끼어있습니다.
거지같은 사이트네용ㅎㅎ
이것들좀 빼달라고 부탁을 해왔네요. 행복합니다.
계획은 이렇습니다.
popup에서 무료/유료를 선택하고- 선택한 옵션에 맞춰 카드를 숨기고 보이는 형식
포인트는 이렇습니다.
contentscript와popup간의 통신local storage에 저장하고 가져오기
밑바탕
먼저 매니페스트입니다.
📄manifest.json
📄contentscript.js
불량 데이터를 갖고있는 카드를 삭제시킵니다.
contentscript <--> popup 통신
contentscript와 popup끼리 통신하는 방법을 찾는데
background를 끼워서하는 방법밖에 못찾겠더라구요
그래도 찾았습니다.
📄popup.js
chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
chrome.tabs.sendMessage(tab[0].id, abcd);
});📄contentscript.js
chrome.runtime.onMessage.addListener(function(abcd) {
console.log(abcd)
})abcd를 주고받는 훈훈한 모습이네요.
popup에서 local storage에 접근
지금까지 했던 대기업 사이트들과는 다르게
다음/이전페이지를 이동하면 popup이 다시 로드됐습니다.
페이지를 이동할때마다 설정을 다시 해주는건 귀찮기때문에
스토리지에 저장했다가 꺼내먹겠습니다.
옵션 저장하기
chrome.storage.local.set({aa:111})
📄contentscript.js
$(document).on("click","button", function() {
let request = {};
request.free = $("#free").is(":checked");
request.gold = $("#gold").val();
request.clippy = $("#clippy").val();
// contentscript.js로 값 보내주기
chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
chrome.tabs.sendMessage(tab[0].id, request);
});
// 저장하기
chrome.storage.local.set(request);
})적용버튼 클릭시, 옵션 적용과 저장을 해줍니다.
옵션 가져오기
chrome.storage.local.get("aa").then((result) => {}) chrome.storage.local.get(["aa", "bb"]).then((result) => {})chrome.storage.local.get("aa", function(data) {} chrome.storage.local.get(["aa", "bb"], function(data) {}chrome.storage.local.get(function(data) {}
📄contentscript.js
chrome.storage.local.get(function(data) {
if(!(data.free)) $("#paid").click();
$("#gold").val(data.gold);
$("#clippy").val(data.clippy);
syncInput($("#gold"));
syncInput($("#clippy"));
$("button").click();
})로드시에 저장시킨 값을 가져와서 세팅을 해줍니다.
끝났습니다
디자인이 구리죠? 아예 손도 대질 않았습니다.
한번 손대면 완벽하게 해야해서 너무 귀찮았습니다.
그리고 만들고보니 생각났는데
클리피와 골드 값을 0으로 한다면
그게 무료랑 무엇이 다른지 모르겠네요...
조절기능은 나중에 추가한거니 어쩔수 없지만 좀 불편하네요..ㅎㅎ
공짜 좋아하는 대머리로서 무료에 유료 섞어놓는거 정말 역겨운데요
이런 확장 프로그램 하나 있으면 얼마나 편한가요
재밌습니다.
