웹 사이트와 Google 크롬 확장 프로그램 간 자바 스크립트에서 게시/구독 "패턴"을 구현하려면 어떻게해야합니까?

Question

웹 사이트와 Google 크롬 확장간에 pub/sub 패턴을 구현하려고합니다. 지금까지 내 실험의 대부분은 강력한 바인딩/트리거 구문 때문에 jQuery를 사용했지만 거의 운이 없었습니다.

배경 : 오픈 소스, Ruby/Rails 기반 Pomodoro Technique 구현으로 작업하고 있습니다. jQuery의 $ .trigger 구문을 사용하여 활동을 노출하도록 사이트의 코드를 수정하여 타이머 세션의 시작과 타이머 세션의 종료에 대한 관찰 가능한 이벤트를 게시합니다. 이러한 트리거는 jQuery 이벤트 코드로 실행을 추적 할 수있는 한 작동합니다. 따라서이 사이트는 몇 가지 관련 이벤트의 게시자입니다.

Google 크롬 확장에서 jquery를로드하고 .bind() 구문을 사용하여 사이트에서 게시하는 맞춤 이벤트에 바인딩하여 트랜잭션의 수신자/구독자 측을 구현했습니다. 확장 프로그램이 사이트에로드되고 사이트의 URL 내의 모든 경로에 대한 사용 권한이 설정되어 있습니다. 나는 결합을 시도한 가입자 측에서 내가 모두 $의 .event.trigger() 및 $ (문서) .trigger() 이 가능한 일반 될 해봤 게시 측에서

,

확장에서 바인드 호출을 실행 한 후 실행을 일시 중지하여 사용자 정의 이벤트 바인딩을 관찰하고 의 결과를 분석 할 때 console.dir ($ (문서). 데이터 ('events')); 목록에서 구독하려고하는 사용자 지정 이벤트가 표시됩니다.

그러나 console.dir ($ (document) .data ('events'))의 결과를 분석 할 때; 웹 사이트에서 사용자 지정 이벤트를 트리거하기 직전에 필수 이벤트 처리기가 목록에 나타나지 않습니다.

내가 어떻게 작동해야하는지 명확하지 않습니다.

p.s. 변경 사항을 트리거하는 요소의 '클릭'이벤트에 직접 바인딩하면 내 확장 코드가 완벽하게 작동하지만 사이트 실행시 DOM이 변경되어 바인딩이 너무 오래 지나지 않아 중단된다는 것을 알아야합니다. pub-sub 메커니즘의 종류가 더 현명 할 수 있습니다. @ ChrisNZL의 대답에 내 대답에 언급 한 바와 같이

편집

는, 나는 .live 시도() 대신 .bind의()와 같은 동작을 참조했습니다.

Answer 1

사이트와 확장 프로그램 간에는 어떻게 상호 작용하고 있습니까?

확장 API를 통해 삽입하는 콘텐츠 스크립트는 can't access the JavaScript of the main page이므로 jQuery 코드로 내보내는 맞춤 이벤트를 얻을 수있는 방법은 없습니다.

일반적인 전역 범위 스크립트 삽입 (즉, 본문에 스크립트 태그 추가)을 사용하는 것이 좋습니다. 이 작업을 시도 했습니까?

Answer 2

jQuery의 .live()을 보셨습니까? .bind()과 유사하지만 "이고 나중에는"인 현재 선택기와 일치하는 모든 요소에 대해 이벤트에 처리기를 연결합니다. 이는 바인딩이 중단되지 않아야 함을 의미합니다.