2013-11-24 4 views
0

Google 크롬에서 확장 프로그램에 대해 배우기 시작했으나 조금 잃어 버렸습니다. 매우 간단한 작업이 필요하지만 어디에서 시작해야할지 모릅니다.Google 크롬에서 이벤트를 캡처하는 방법

가장 큰 질문은 manifest.json이 어떻게 작동 하는지를 여러 곳에서 읽었지만 잘 이해할 수 없다는 것입니다. 그런 다음, 사용자가 링크 위로 마우스를 가져갈 때나 단추, 텍스트 영역 및 입력을 클릭 할 때마다 콘솔 이벤트에 경고 메시지를 반환해야합니다.

나는 CONSOLE.LOG 작품과 같은 몇 가지 테스트를했지만 아무도 어떻게 해야할지하지 않았다, 일한 : (

를 나는 이런 식으로 뭔가하려고 노력 : 사용자가 브라우저를 열 때마다를 확장하고 인쇄 할 수 있습니다 콘솔에 동일한을 시작했다.

를 나는 그것이있을 거라고 생각 그래서 당신을 감사하고 내가 답변을 바랍니다.

+0

콘텐츠 스크립트 (https://developer.chrome.com/extensions/content_scripts.html)가 필요한 것 같습니다. –

답변

1

를 간단한 용어 manifest.json에서이 확장 기능 설정이 저장된 파일입니다. 배우 3 종류가 있습니다 Chrome 확장 프로그램

  1. Options page : 크롬 창의 오른쪽 구석에있는 확장 프로그램을 클릭하면 팝업으로 표시되는 페이지입니다.
  2. Background Scripts : 배경 페이지/배경 스크립트는 Chrome 확장 프로그램의 서버로 작동하며 Chrome에서 제공하는 모든 권한을가집니다. 배경 페이지 또는 배경 스크립트를 언급 할 수 있지만 그 중 하나를 사용해야합니다. 아래에서는이 두 가지 사용 사례에 대해 설명합니다. 예를 들어 Chrome 확장 프로그램에는 clipboardEvents가 있으며 이는 백그라운드 스크립트에서만 작동합니다. 그러나 클립 보드 API에는 DOM 지원이 필요합니다. 클립 보드 API 작업을 복사하거나 붙여 넣으려면 텍스트 영역을 만들고 초점을 맞추고 execCommand('paste')을 사용하여 붙여 넣기 이벤트를 실행 한 다음 텍스트 영역 값을 가져와 클립 보드 내용을 제공해야합니다. DOM 관련 작업이 필요 없다는 것을 알고 있다면 백그라운드 스크립트에만 의존하십시오. 백그라운드 스크립트 실행은 비동기입니다. 배경, 콘텐츠 스크립트 및 옵션 페이지 간의 커뮤니케이션은 Chrome 이벤트 API를 통해 수행해야합니다.

  3. : 확장 기능이 활성화 된 웹 페이지에 스크립트 또는 스타일을 삽입하려는 경우 콘텐츠 스크립트를 선택할 수 있습니다. 다음은 웹 페이지에서 수행 된 모든 액션이 컨텐츠 스크립트로 캡처 한 다음 백그라운드 페이지/스크립트로 보내 추가 처리를 수행 한 다음 AJAX 메커니즘과 똑같은 결과를 얻는 것입니다.

자세한 내용은 http://developer.chrome.com/extensions/manifest.html의 각 섹션을 자세히 읽어 보시기 바랍니다.

"content_scripts": [{ 
     "matches": ["http://www.stackoverflow.com/*"], 
     "css": ["yourPageStyles.css"], 
     "js": ["jquery.js", "myscript.js"] // 
    }] 

당신이 이상의 어떤 페이지 수준 이벤트를 추가 할 경우 가져가 말했듯이, yourPageStyles.css 파일에 배치 링크와 버튼의 이벤트를 클릭 유래의 스타일을 타고하려는 경우

. 그런 다음 코드를 myscript.js에 넣으십시오. myscript.js 파일 코드는 일반적인 js 파일처럼 stackoverflow.com 웹 페이지 컨텍스트에서 실행됩니다. 하지만 확장 리소스를 추가하려면 getUrl()을 사용해야합니다. 예를 들어 당신의 이미지를 추가하려면 웹 페이지에서 확장

var srcUrl = chrome.extension.getURL('images/yourImage.png'); 
someImage.src = srcUrl; 

을 그리고 그에게 전에 웹 페이지와 공유 할 수있는 자원이 무엇인지 정의하기 위해 그들에게 웹 접근 자원을 확인해야합니다. 콘텐츠 스크립트에서만 사용하는 경우 웹에서 액세스 할 수있는 리소스를 언급하지 않아도됩니다.

희망이 도움이됩니다.

관련 문제