Barry Simpson의 블로그

당신은 의도: 크롬 클립보드

다음을 읽는 크롬 확장 프로그램 만들기 클립보드에 쓰기

최소한의 사용자 상호 작용으로 두 대 이상의 컴퓨터 간에 사용자의 클립보드를 동기화하는 웹 앱을 만들고 싶다고 가정해 보겠습니다. document.execCommand()를 사용하더라도 브라우저 보안 제한으로 인해 비동기 방식으로 수행하기 어렵거나 불가능합니다.

document.execCommand('copy') – 창의 현재 텍스트 선택을 사용자의 클립보드에 기록 – 사용자 클릭 이벤트 내에서만 작동합니다. 보이지 않는 입력 요소에서 프로그래밍 방식으로 임의의 텍스트를 선택할 수 있지만 해당 선택 항목을 클립보드에 복사하려면 사용자의 암시적 권한이 여전히 필요합니다. 복사 프로세스에 항상 사용자를 참여시키려면 계속 진행하는 것이 좋습니다. 그렇지 않은 경우 브라우저 확장 프로그램을 사용해야 합니다.

document.execCommand('paste') – 사용자의 클립보드를 읽고 페이지의 초점이 맞춰진 입력 요소에 넣는 – 확장 프로그램에서 실행되지 않는 한 Chrome에서는 전혀 작동하지 않습니다. .

Chrome 확장 프로그램을 만들어 봅시다

간단함을 위해:

<울>

  • 지금은 Chrome에서만 이 문제를 해결하고 있습니다. 고유한 API 또는 확장 프로그램을 사용하는 다른 브라우저에서도 가능하다고 확신합니다.
  • 최소한 Chrome 확장 프로그램 시작하기 가이드를 읽고 매니페스트, 메시지, 배경 페이지와 같은 기본 확장 프로그램 개념을 알고 있다고 가정하겠습니다.
  • 동시적으로 & 시스템 클립보드를 작성합니다. 더 완전한 기능을 갖춘 실제 앱은 더 많은 권한과 더 복잡한 코드가 거의 확실히 필요합니다.
  • 이미지 또는 기타 바이너리 개체가 아닌 텍스트 클립보드 콘텐츠만 처리합니다.
  • 이 확장에는 세 가지 주요 부분이 있습니다.

    <울>

  • 확장 내의 매니페스트 – manifest.json
  • 확장 프로그램 내부의 배경 페이지 – background.html, background.js
  • 원격 웹 호스트에서 로드된 웹 앱 – index.html, main.js
  • 여기에 전체 파일의 Github 요점이 있습니다.

    웹 앱 페이지

    예를 들어 다른 앱이나 탭으로 전환하여 일부 텍스트를 복사하고 이 테스트 페이지로 다시 전환한 후와 같이 페이지가 표시될 때마다 페이지가 로드되고 업데이트될 때 예제 웹 앱이 클립보드의 현재 콘텐츠를 보여줍니다.< /p>

    다음은 index.html에서 클립보드 콘텐츠가 표시되어야 하는 위치를 보여줍니다.

    <h4>현재 클립보드 텍스트:</h4>
    
    <p id="출력"></p>
    

    다음은 main.js에서 클립보드 변경 사항을 읽기 위해 이벤트를 등록하는 위치를 보여줍니다.

    document.addEventListener('DOMContentLoaded', function() {
        클립보드()를 읽습니다.
    
        // 페이지가 표시될 때마다 클립보드를 다시 읽습니다.
        document.addEventListener('가시성 변경', function() {
            if (!document.hidden) {
                클립보드()를 읽습니다.
            }
        });
    });
    

    아래의 readClipboard 함수는 확장 프로그램에 비동기 메시지를 보냅니다. 확장 프로그램은 시스템 클립보드를 읽고 우리가 제공하는 콜백을 실행하여 클립보드 콘텐츠를 제공합니다. extensionIdchrome://extensions/ 페이지에서 확장 프로그램을 처음 로드할 때 Chrome에서 할당합니다. 당신은 다를 것입니다.

    var extensionId = '여기에 귀하의 확장 ID';
    
    함수 readClipboard() {
        chrome.runtime.sendMessage(
            확장 ID,
            { 메소드: 'getClipboard' },
            기능(응답) {
                document.getElementById('클립보드 콘텐츠').textContent = 응답;
            }
        );
    }
    

    index.html에는 시스템 클립보드에 임의의 텍스트(이 경우 #para 단락의 내용)를 쓰기 위해 클릭할 수 있는 버튼도 포함되어 있습니다.< /p>

    <button id="copyButton">시스템 클립보드를 다음으로 설정:</button>
    <p id="para">Ut scelerisque posuere sem, non aliquam ipsum sodales et. Fusce luctus, mauris ut volutpat varius, leo dui posuere ligula, vitae rhoncus leo ipsum eu neque.</p>
    

    main.js에는 시스템 클립보드에 일부 텍스트를 쓰도록 요청하는 메시지를 확장 프로그램에 보내는 복사 버튼에 대한 클릭 핸들러가 포함되어 있습니다. chrome.runtime.sendMessage()는 본질적으로 비동기식이므로 더 이상 사용자 이벤트 내에서 실행하는 데 국한되지 않습니다.

    document.getElementById('copyButton').addEventListener('클릭', function() {
        var 텍스트 = document.getElementById('파라').textContent;
    
        chrome.runtime.sendMessage(
            확장 ID,
            { 메소드: 'setClipboard', 값: 텍스트 },
            기능(응답) {
                console.log('확장 세트 클립보드 응답', 응답);
            }
        );
    });
    

    복사 버튼을 클릭한 후 다른 곳에 붙여넣으면 제대로 작동하는지 확인할 수 있습니다.

    See also  프린스 앨버트 (성기 피어싱) - pa 피어싱

    매니페스트

    매니페스트는 확장 프로그램이 사용자에게 요구하는 권한, 확장 프로그램이 요청할 수 있는 도메인, 확장 프로그램에 메시지를 보낼 수 있는 도메인 페이지를 나열합니다.

    주의할 세 가지 섹션이 있습니다.

    background 섹션은 확장 번들 내부의 배경 페이지 이름을 선언합니다. Chrome은 이 페이지에 대해 보이지 않는 샌드박스 처리된 DOM을 자동으로 생성합니다.

    "배경": {
      "지속적인": 거짓,
      "페이지": "background.html"
    },
    

    권한 섹션에는 확장 프로그램이 사용자에게 요구하는 권한이 나열됩니다. 이 확장은 사용자의 시스템 클립보드를 읽고 쓸 수 있는 권한이 필요합니다. clipboardRead 권한은 확장 프로그램의 백그라운드 스크립트가 document.execCommand('paste')를 사용할 수 있도록 합니다. clipboardWritedocument.execCommand('copy')를 활성화합니다.

    "권한": [
      "클립보드 읽기",
      "클립보드쓰기"
    ],
    

    externally_connectable 섹션은 Chrome 메시징 API(chrome.runtime.sendMessage 등)를 사용하여 확장 프로그램에 직접 메시지를 보낼 수 있는 웹페이지의 도메인을 선언합니다. 이 예에서는 가장 간단한 가능한 솔루션을 보여주기 위해 localhost 도메인에 하드 코딩했습니다. 로컬 컴퓨터에서 실행되지 않는 실제 웹 앱에서는 특정 도메인을 지정해야 하며 민감한 특성 때문에 https:// 체계만 사용하고 싶을 것입니다. 클립보드 데이터.

    "externally_connectable": {
      "일치": [
        "http://localhost/*"
      ]
    }
    

    배경 페이지

    배경 페이지는 간단한 background.html 문서와 background.js 스크립트로 구성되어 있습니다.< /p>

    HTML 페이지는 document.execCommand()가 작동하도록 하는 데 사용할 텍스트 영역과 background.js를 로드하는 스크립트 태그로 구성됩니다.

    <!DOCTYPE html>
    <html>
    <머리>
        <메타 charset="utf-8">
        <script src="background.js"></script>
    </머리>
    <바디>
        <textarea id="ta"></textarea>
    </바디>
    </html>
    

    background.js에서 외부 웹페이지에서 보낸 Chrome 런타임 메시지에 대한 핸들러를 등록합니다. Chrome 메시지 API는 간단한 요청 객체를 허용합니다. 요청 객체는 수행할 작업을 지정하는 method 속성과 메서드가 매개변수를 허용하는 경우 선택적 value 속성으로 구성됩니다. sendResponsemain.js에서 제공한 콜백 함수입니다.

    chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
        스위치(요청.메서드) {
            케이스 'getClipboard':
                sendResponse(getClipboard());
                부서지다;
            케이스 'setClipboard':
                sendResponse(setClipboard(요청 값));
                부서지다;
            기본:
                console.error('알 수 없는 메소드 "%s"', request.method);
                부서지다;
        }
    });
    

    getClipboard() 함수는 document.execCommand('paste')를 호출하지만 작동하려면 textarea 또는 input[type=text] 요소를 선택해야 이 배경 문서가 보이지 않더라도 붙여넣은 텍스트가 이동할 수 있습니다. 그런 다음 즉시 텍스트 영역에서 텍스트를 다시 읽고 웹페이지로 반환합니다.

     함수 getClipboard() {
        var 결과 = null;
        var 텍스트 영역 = document.getElementById('타');
        텍스트 영역 값 = '';
        textarea.select();
    
        if (document.execCommand('붙여넣기')) {
            결과 = 텍스트 영역.값;
        } 또 다른 {
            console.error('클립보드 내용을 가져오지 못했습니다');
        }
    
        텍스트 영역 값 = '';
        반환 결과;
    }
    

    setClipboard() 함수는 유사한 패턴을 따릅니다. 텍스트 영역 값을 웹페이지에서 제공하는 주어진 텍스트로 설정한 다음 텍스트 영역 콘텐츠를 선택하고 document.execCommand('copy')를 실행하여 텍스트 영역 콘텐츠를 시스템 클립보드에 복사합니다.

    See also  Word에서 하이퍼링크 만들기 - 단어 하이퍼링크
    <사전>함수 setClipboard(값) {
    var 결과 = 거짓;
    var 텍스트 영역 = document.getElementById('타');
    textarea.value = 값;
    textarea.select();

    if (document.execCommand('복사')) {
    결과 = 참;
    } 또 다른 {
    console.error('클립보드 내용을 가져오지 못했습니다');
    }

    텍스트 영역 값 = '';
    반환 결과;
    }

    결론

    이것은 최소한의 코드로 가능한 것을 보여주기 위해 지나치게 단순화된 예입니다. 그러나 원하는 경우 이러한 동일한 기본 기술을 확장하여 더 많은 작업을 수행할 수 있습니다.

    참조


    주제와 관련된 추가 정보 보기 크롬 클립보드

    이거 눌러서 복사 붙여넣기 해봤다면 꼭 보세요 (한번 보면 예전으로 못 돌아갑니다..)

    • 저자: 1분미만
    • 게시일: 2021-12-19
    • 평점: 4 ⭐ ( 4411 평점 )
    • 검색 결과 일치: 복사 붙여넣기 캡쳐 키보드 컴퓨터 노트북 PC 단축키 컴퓨터기능 캡쳐기능 1분미만 꿀팁

    사이트 권한 변경하기

    • 저자: support.google.com
    • 평점: 4 ⭐ ( 3832 평점 )
    • 검색 결과 일치: 기본 설정을 변경하지 않고도 사이트에 부여할 권한을 설정할 수 있습니다.
      모든 사이트에 적용되는 설정 변경

    클립보드복사 스크립트 (모든 브라우저)

    • 저자: euntori7.tistory.com
    • 평점: 3 ⭐ ( 5968 평점 )
    • 검색 결과 일치: clipboard 복사 스크립트. flash를 사용하지 않고 스크립트로만 함. 크롬, 파이어폭스, ie10 테스트 완료 방법은.. input박스를 안보이게 하나 만들고, 그 안에 value값을 집어넣어서 select되게 한후 복사하는 방..

    크롬에서 클립보드 복사 버튼 만들기

    • 저자: m.blog.naver.com
    • 평점: 5 ⭐ ( 8372 평점 )
    • 검색 결과 일치:

    크롬 U 모양 에어컨 에어 벤트 그릴 콘센트 블레이드 장식 스트립, 포드 아우디 혼다 VW BMW 도요타 DIY 자동차 인테리어

    • 저자: ko.skqo.com
    • 평점: 4 ⭐ ( 7773 평점 )
    • 검색 결과 일치:

    컴퓨터 클립보드 위치 알아보기

    • 저자: likeinform.tistory.com
    • 평점: 5 ⭐ ( 9819 평점 )
    • 검색 결과 일치: 컴퓨터 클립보드 위치 우리는 컴퓨터를 통해 작업을 하는 동안 의외로 다양한 기능들을 활용하는데요, 그 중에서도 가장 흔히 사용하는 것이 바로 복사, 붙여넣기가 아닐까 생각됩니다. 텍스트나 파일들을 다른곳..

    클립 보드에 복사

    • 저자: chrome.google.com
    • 평점: 4 ⭐ ( 1144 평점 )
    • 검색 결과 일치:

    이 카테고리의 더 많은 기사 보기: 컴퓨터 팁