본문 바로가기

coding/javascript10

[크롬 익스텐션] Clipboard 개발 일지 설계하기 textarea 생성 만든 textarea 안보이게 스타일링 body에 추가 getSelection()과 createRange()를 사용해 clipboard할 텍스트 선택 Document.execCommand() 명령어로 copy하기. getSelection 영역 초기화 놓쳤던 부분 textArea 엘리먼트에 자체 focus(), select()를 사용하였더니 크롬 확장자 개발 특성상 크롬 확장자와 기존 페이지의 input이 충돌하여 먹지 않아서 document.getSelection(), getSelection.createRange()를 이용해야 했음. 이전 소스: const textArea = document.createElement('textarea'); textArea.va.. 2022. 2. 14.
firstElementChild vs firstChild firstElementChild Element.firstElementChild 읽기 전용 속성 부모요소의 첫번째 자식요소 반환 자식요소가 없을 경우 null 반환 firstChild Element.firstChild 트리에서 노드의 첫번째 자식 반환 노드에 자식요소가 없으면 null 반환 const list = document.getElementById('list'); console.log(list.firstElementChild.textContent, 'firstElementChild'); console.log(list.firstChild, 'firstChild'); 2022. 1. 1.
크롬 확장자 개발기, 구성요소 살펴보기👀 구성요소: 배경 스크립트 콘텐츠 스크립트 옵션 페이지 UI 요소 1. 메니페스트 파일 만들기 확장프로그램은 매니페스트에서 시작한다. manifest.json 파일을 만들어 기본 세팅 코드 복붙하기: { "name": "Getting Started Example", "description": "Build an Extension!", "version": "1.0", "manifest_version": 3, "externally_connectable": { "matches": ["*://*.naver.com/*", "*://*.google.com/*", ...] }, "content_scripts": [ { "matches": [""], "js": ["src/scripts/run.ts"] } ], }아이콘, .. 2021. 12. 24.
'??', 널 병합 연산자 (Nullish coalescing operator) 문법 leftExpr ?? rightExpr 널 병합 연산자 (= 물음표 2개) 왼쪽 연산자가 null 또는 undefined일 때 오른쪽 연산자를 반환하고, 그렇지 않으면 왼쪽 연산자를 반환하는 논리 연산자. || 차이점? ||연산자가 왼쪽 연산자가 null, undefined뿐만 아니라 falsy값에 해당하는 경우 오른쪽 피연산자를 반환하는 것과 달리 ??연산자는 falsy값을 처리하지 않고 원시값으로 처리하여 연산한다. const or = 0 || 'hi'; // 'hi' const not_or = 0 ?? 'hi'; // 0 2021. 12. 22.

티스토리툴바