크롬 확장에 페이지의 각도 JS 사용

일부 각도가 각도로 구성된 HTML이있는 HTML 페이지가 있습니다. 이제 텍스트 상자에서 값을 수정하기위한 크롬 확장 기능을 빌드하고 있습니다. element.value= newValue은 텍스트 상자가 각도로 디자인되어 있기 때문에 작동하지 않습니다. 몇 가지 리소스를 읽은 후에 요소의 범위를 변경해야한다는 것을 알게되었습니다. 확장 프로그램에서이 작업을 시도했습니다.크롬 확장에 페이지의 각도 JS 사용

var eleScope = window.angular.element(document.querySelector('.textbox')).scope(); 
eleScope.$apply(function() { 
    eleScope.item.request.box = newValue; 
});

의도 한대로 작동하지 않는 것 같습니다. 문제를 더 깊이 파고 들자 창 영역의 각도가 올바른 범위를 얻지 못하고 있음을 알게되었습니다.

또한 내 확장 프로그램에서 angular.js를 삽입하고 직접 angular.element을 사용하여 문제를 해결하지 못했습니다.

뭔가 누락되었습니다. 답장을 감사하십시오.

출처

2014-04-03 RaviTeja

음 .. 사실 바닐라 자바 스크립트 또는 JQuery를 사용하여 값을 변경할 수 있어야하며 양방향 바인딩 즉 범위를 업데이트 할 필요가 없습니다. 뷰를 업데이트하면 모델이 업데이트되고 그 반대의 경우도 마찬가지입니다.

모델이 업데이트되지 않는 유일한 이유는 모델을 업데이트 할 사용자가 "클릭"또는 "입력"과 같은 특정 이벤트에서만 트리거하기 때문입니다.

여기 해결책은 수동으로 이러한 이벤트를 트리거하는 것입니다. 이에 의해 할 수 있습니다 (각 전문가를 발사합니다) 및 범위를 업데이트 "입력"이벤트에 대한 요소의 모든 핸들러를 트리거

// the selector used is based on your example. 
var elementTOUpdate = $('.textbox'); 
input.val('new-value'); 
input.trigger('input');

마지막 문장. 트리거 기능에 더 많은 정보 : http://api.jquery.com/trigger/

출처

2014-10-17 19:16:37 Venkatesh

웹 페이지와 Chrome 확장 프로그램의 콘텐츠 스크립트는 동일한 DOM을 공유하지만 별도의 JS 실행 컨텍스트가 있습니다. 즉, Chrome 확장 프로그램에서 angular.element().scope()을 통해 요소를 가져 왔음에도 불구하고 올바른 범위 개체에 액세스하지 못했습니다. 자세한 내용은 Chrome dev docs을 참조하십시오.

Chrome 확장 프로그램의 수정 된 데이터를 페이지로 가져 오려면 콘텐츠 스크립트를 통해 DOM을 조작하거나 추가 단계를 수행하여 수정 된 데이터를 가져 오세요. 데이터를 웹 페이지의 실행 컨텍스트 (및 이후 컨트롤러 범위)에 저장합니다.

후자의 경우 해결책은 Chrome의 Message Passing API를 사용하는 것입니다. 특히 웹 페이지와 Chrome 확장 프로그램 (here 참조)간에 통신하도록 설계된 API입니다. 웹 페이지에서

"externally_connectable": { 
    "matches": ["http://*.foo.com/*"] 
}

에 요청합니다

이

첫째, 당신의 manifest.json 파일에서 해당 웹 사이트 (들)에 대한 API를 사용 : 여기

이 문서에서 예제 Chrome 확장 프로그램에 연결합니다. 요청에 대한 리스너를 추가하여 크롬 확장 프로그램의 background.js 파일에서

// Chrome extension's ID 
var extensionId = "abcdefghijklmnoabcdefhijklmnoabc"; 

chrome.runtime.sendMessage(extensionId, {foo: 'bar'}, 
    function(response) { 
    if (response.success) { 
     $scope.myData.foo = response.data; 
     $scope.$apply(); 
    } 
    });

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) { 
    if (request.foo) { 
     sendResponse({ data: 'modified data goes here' }); 
    } 
    });

이 과정을 당신의 크롬 확장에 데이터를 보낼 수 있도록 콜백, 당신은 당신의 모델을 업데이트 할 것 AngularJS 앱이 올바른 실행 환경으로 작동하도록합니다.

출처

2014-10-17 18:32:48

주요 문제가 아니라 조나단 Guerrera의 answer에 설명되어 있습니다 : 당신은 단지 확장에 각도로드하고이 각도의 다른 인스턴스이기 때문에이 일을 기대할 수 없다; 실제 JS 컨텍스트에있는 것이 진짜입니다.

가능한 또 다른 (해커이지만) 해결책은 inject code into the page's context입니다. 이렇게하면 페이지의 자체 Angular를 실제로 조작하고있는 것입니다.

다른 통신 방법 인 between the page-level script and the content script과 결합 할 수 있습니다.

출처

2016-02-02 11:13:42 Xan

크롬 확장에 페이지의 각도 JS 사용

답변

관련 문제