[ JavaScript ] 크롬 확장프로그램 마우스 우클릭 방지

1. manifest.json

{
  "name": "MouseDrag",
  "version": "1.1",
  "manifest_version": 3,
  "description": "Available your Mouse Drag, Select And Right Click",
  "background":
  {
   "service_worker": "background.js"
  },
  "action":
  {
    "default_icon": "mouseDrag.png"
  },
  "permissions": ["activeTab", "scripting"],
  "host_permissions":
  [
    "file:///*/*",
    "https://*/*",
    "http://*/*"
  ]
}

 

2. background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['dragAvailable.js']
  });
});

 

3. dragAvailable.js

(function()
{
    var parent      = document;
    var childs      = parent.children;
    var cnt         = 0;
    var tree        = new Array();
    var script = document.createElement('script');
    var scriptStr = "";

    script.type='text/javascript';

    window.addEventListener('selectstart', function (event) {
        event.stopPropagation();
    }, true);

    for(let i = 0; i < document.querySelectorAll('iframe').length; i++)
    {
        document.querySelectorAll('iframe')[i].contentWindow.addEventListener('selectstart', 
        function (event) 
        {
            event.stopPropagation();
        }, true);

        document.querySelectorAll('iframe')[i].contentWindow.addEventListener('contextmenu', 
        function (event) 
        {
            event.stopPropagation();
        }, true);
    }

    searchChild();

    while (parent != null)
    {
        if (cnt < childs.length)
        {
            // 자식 노드 검색
            searchChild();
        }
        else
        {
            // 마우스 드래그 허용 작업
            allowDrag();

            if (parent.parentNode != null)
            {
                // 부모 노드로 되돌아감
                returnParent();
            }
            else
            {
                break;
            }
        }

        // 로그 비활성화
        //showLogs();
    }

    script.innerHTML = scriptStr;
    document.children[document.children.length - 1].appendChild(script);

    console.log("Mouse Allow Task Complete!")

    function allowDrag()
    {
        if (parent.style != undefined)
        {
            parent.style.userSelect = "auto";
        }
        
        var tmp = "document";
        for(var i = 0; i < tree.length; i++)
        {
            tmp = tmp + ".children[" + tree[i] + "]";
        }

        scriptStr = scriptStr + tmp + ".onselectstart=new Function('return true');";
        scriptStr = scriptStr + tmp + ".oncontextmenu=new Function('return true');";

        // 아래 주석처리된 방법의 경우 소스로는 가능하나 확장프로그램에서 동작하지 않기 때문에
        // script를 문자열로 저장한뒤에 그 스크립트 소스를 페이지에 삽입하는 방식으로 변경함
        // parent.onselectstart=new Function('return true');
        // parent.oncontextmenu=new Function('return true');
    }

    function searchChild()
    {
        tree.push(cnt);
        parent      = childs[cnt];
        childs      = parent.children;
        cnt         = 0;
    }

    function returnParent()
    {
        cnt = tree.pop() + 1;
        parent = parent.parentNode;
        childs = parent.children;
    }

    function showLogs()
    {
        console.log(cnt);
        console.log(childs.length);
        console.log(tree);
        console.log(parent);
    }
})();

 

4. mouseDrag.png

MouseDrag 폴더 내 위 파일 배치

[ chrome://extensions/ ] → [ 압축해제된 확장 프로그램을 로드합니다. ]

[ MouseDrag 폴더 선택 ]

확장프로그램 추가 확인