깃허브 주소

목표

1. 미리보기 토글이라는 버튼을 만들고 해당 버튼 클릭 시 미리보기가 사라져야 한다. 미리보기가 사라져 있는 상태에서 다시 클릭 시 미리보기가 나타나야 한다.
2. 미리보기 토글 버튼을 footerContainer에 담아서 넣어야 한다.

로직

1. https://velog.io/write 라는 주소에 접속을 했을 시 버튼을 생성한다.
2. 버튼에 innerText, event 등 필요한 정보들을 지정하고 footerContainer에 담아야 한다.

구현 내용

// content.js

const previewDiv = document.querySelector('[data-testid="right"]');
const tempStoreButton = Array.prototype.slice
  .call(document.querySelectorAll('button'))
  .filter((element) => element.innerText.includes('임시저장'))[0];
const footerContainer = document.querySelector('.sc-ctqQKy.hzSnZf');

console.log(previewDiv, tempStoreButton);
const appendButtonTag = () => {
  const button = document.createElement('button');

  button.classList.add('jYsOEX', 'gRPveD');

  button.innerText = '미리보기 토글';
  button.dataset.toggle = 'true';

  button.addEventListener('click', () => {
    console.log('아니 왜', button.dataset.toggle, typeof button.dataset.toggle);
    // 아니 왜 true string
    const isToggle = button.dataset.toggle === 'true';
    previewDiv.style.display = isToggle ? 'none' : '';
    footerContainer.style.width = isToggle ? '100vw' : '100%';
    button.dataset.toggle =
      button.dataset.toggle === 'false' ? 'true' : 'false';
  });

  //tempStoreButton.parentElement.insertAdjacentHTML('afterbegin', button);
  tempStoreButton.parentElement.prepend(button);
};
appendButtonTag();

// manifest.json

{
  "manifest_version": 3,
  "name": "velog-preview-toggle-button",
  "description": "if you click toggle button then non display preview",
  "version": "1.0",
  "author": "dlwlsghgk124@naver.com",

  "action": {
    "default_icon": {
      "16": "/images/icon-16.png",
      "32": "/images/icon-32.png",
      "48": "/images/icon-48.png",
      "128": "/images/icon-128.png"
    },
    "default_title": "velog-preview-toggle-button"
  },
  "permissions": [],
  "icons": {
    "16": "/images/icon-16.png",
    "32": "/images/icon-32.png",
    "48": "/images/icon-48.png",
    "128": "/images/icon-128.png"
  },

  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": ["https://velog.io/write*"]
    }
  ],

  "background": {
    "service_worker": "/background.js"
  },
  "host_permissions": ["<all_urls>"]
}

데모

느낀점

로직은 간단했지만 크롬 익스텐션을 개발한다는 것 자체가 굉장히 익숙치 않은 개발 환경이었다. 각각의 파일이 무엇을 의미하는지를 알고 있어야 했고 또, manifest.json, service worker 등 사용하는 방법에 대해서 더 공부를 해야겠다고 생각했다.