1. manifest.json
{
"_comment_name": "확장 프로그램 이름",
"name": "MouseDrag",
"_comment_version": "확장 프로그램 버전",
"version": "1.1",
"_comment_manifest_version": "Manifest 버전 (3은 최신 권장 사양)",
"manifest_version": 3,
"_comment_description": "확장 프로그램 설명",
"description": "Available your Mouse Drag, Select And Right Click",
"_comment_background": "백그라운드에서 실행되는 서비스 워커 파일",
"background": {
"service_worker": "background.js"
},
"_comment_action": "툴바에 표시될 아이콘",
"action": {
"default_icon": "mouseDrag.png"
},
"_comment_permissions": "확장이 요청하는 권한 목록",
"permissions": [
"activeTab",
"scripting"
],
"_comment_host_permissions": "확장이 동작 가능한 URL 또는 도메인",
"host_permissions": [
"file:///*/*",
"https://*/*",
"http://*/*"
]
}
2. background.js
// ▶ 확장 프로그램 아이콘(툴바 버튼)을 클릭했을 때 실행되는 리스너 등록
chrome.action.onClicked.addListener((tab) => {
// ▶ 현재 활성 탭에 dragAvailable.js 파일을 삽입해서 실행
chrome.scripting.executeScript({
target: { tabId: tab.id }, // 현재 클릭한 탭의 ID를 대상으로 설정
files: ['dragAvailable.js'] // 실행할 스크립트 파일 (확장 프로그램 내 포함된 js 파일)
});
});
3. dragAvailable.js
(function () {
// 사용자가 마우스를 사용하는 행동 중 차단 가능한 주요 이벤트 목록
const events = [
'selectstart', // 텍스트 선택 시작
'contextmenu', // 우클릭 메뉴
'dragstart', // 드래그 시작
'mousedown', // 마우스 버튼 누름
'mousemove', // 마우스 움직임
'mouseup', // 마우스 버튼 뗌
'copy' // 복사 이벤트
];
// ▶ CSS로 사용자 드래그, 선택, 우클릭 등을 강제로 허용시키는 스타일 삽입
const style = document.createElement('style');
style.textContent = `
* {
-webkit-user-select: text !important; /* WebKit 브라우저용 텍스트 선택 허용 */
user-select: text !important; /* 표준 텍스트 선택 허용 */
-webkit-user-drag: auto !important; /* WebKit 브라우저용 드래그 허용 */
pointer-events: auto !important; /* 요소에 대한 마우스 이벤트 허용 */
}
`;
document.head.appendChild(style); // <head>에 스타일 삽입
// ▶ 특정 DOM 노드에서 이벤트 핸들러 및 속성 제거 함수
const cleanNode = (node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return; // 요소 노드가 아니면 무시
// 각종 마우스 이벤트에 연결된 사용자 정의 함수 제거
node.onselectstart = null;
node.oncontextmenu = null;
node.ondragstart = null;
node.onmousedown = null;
node.onmouseup = null;
node.oncopy = null;
node.onmousemove = null;
// HTML 속성 제거 (드래그 제한을 위해 사용되는 속성)
node.removeAttribute('draggable');
// 인라인 스타일을 덮어써서 드래그/선택 등을 가능하게 설정
node.style.userSelect = 'text';
node.style.webkitUserDrag = 'auto';
node.style.pointerEvents = 'auto';
};
// ▶ 지정된 루트 요소 이하 모든 자식 요소에 cleanNode 적용
const walk = (root) => {
const elements = root.querySelectorAll('*'); // 모든 자식 요소 선택
elements.forEach(cleanNode); // 각각에 대해 cleanNode 실행
};
// ▶ 현재 문서 전체 요소에 대해 복사/드래그 방지 해제
walk(document.body);
// ▶ window 및 document 레벨에서 캡처 단계 이벤트 차단 해제
// stopPropagation()으로 이벤트가 위로 전파되지 않도록 막는 코드 방지
events.forEach(evt =>
window.addEventListener(evt, e => { e.stopPropagation(); }, true) // 캡처 단계
);
events.forEach(evt =>
document.addEventListener(evt, e => { e.stopPropagation(); }, true)
);
// ▶ 모든 iframe 내 문서도 동일하게 처리
document.querySelectorAll('iframe').forEach(iframe => {
try {
const idoc = iframe.contentDocument || iframe.contentWindow.document;
walk(idoc.body); // iframe 내부의 body에도 walk 적용
} catch (e) {
// 동일 출처 정책(CORS) 등으로 iframe 접근이 막힐 경우 예외 처리
console.warn('iframe 접근 불가:', e);
}
});
// ▶ 완료 로그 출력
console.log('✅ 차단 해제 완료: 화면 내용 보존됨');
})();
4. mouseDrag.png
5. 코드 축소(추가 팁)
npm install -g terser
terser dragAvailable.js -o dragAvailable.min.js --compress --mangle
코드 압축 도구 terser를 사용하여 자바스크립트 파일을 압축 후 background.js 대상 변경
// ▶ 확장 프로그램 아이콘(툴바 버튼)을 클릭했을 때 실행되는 리스너 등록
chrome.action.onClicked.addListener((tab) => {
// ▶ 현재 활성 탭에 dragAvailable.js 파일을 삽입해서 실행
chrome.scripting.executeScript({
target: { tabId: tab.id }, // 현재 클릭한 탭의 ID를 대상으로 설정
files: ['dragAvailable.min.js'] // 실행할 스크립트 파일 (확장 프로그램 내 포함된 js 파일)
});
});'Programming Languages > JavaScript' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 AJAX 송수신 (0) | 2024.06.03 |
|---|---|
| [ JavaScript ] TypeScript 컴파일 (0) | 2024.05.31 |
| [ JavaScript ] onclick 이벤트 추가 (0) | 2021.04.22 |