Usando o JS angular da página na extensão chrome

Eu tenho uma página HTML que tem algum DOM configurado com Angular. Agora estou construindo uma extensão do Chrome para modificar o valor em uma checkbox de texto. element.value= newValue não funcionará como a checkbox de texto é projetada com Angular. Depois de ler alguns resources, descobri que preciso fazer as alterações no escopo do elemento. Eu tentei fazer isso na extensão.

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

Isso não parece funcionar como pretendido. Quando investiguei o problema mais profundamente, descobri que o angular no escopo da janela não estava obtendo o escopo certo.

Eu também tentei injetar angular.js da minha extensão e usar angular.element diretamente, o que também não parece resolver o problema.

Estou esquecendo de algo. Aprecie suas respostas.

Hmm .. Na verdade, você deve ser capaz de alterar o valor usando JavaScript ou JQuery e não precisa atualizar o escopo, pois é bidirecional. A atualização da visão atualiza o modelo e vice-versa.

A única razão pela qual o modelo não é atualizado é porque os observadores para atualizar o modelo acionam somente events específicos como “clique” ou “input”.

Portanto, a solução aqui seria triggersr manualmente esses events. Isso pode ser feito por:

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

A última instrução acionará todos os manipuladores no elemento para o evento “input” (que acionará os observadores angulares) e atualizará o escopo. Mais informações sobre a function de gatilho: http://api.jquery.com/trigger/

Embora a sua página da web e o script de conteúdo da sua extensão do Chrome compartilhem o mesmo DOM, eles têm contextos de execução separados do JS. Em outras palavras, apesar de pegar o elemento via angular.element().scope() na sua extensão do Chrome, você ainda não está acessando o object de escopo correto. (Veja os documentos de desenvolvimento do Chrome para saber mais sobre isso).

Para obter os dados modificados de sua extensão do Chrome na página, você pode manipular o DOM por meio do script de conteúdo ou realizar algumas etapas adicionais para inserir os dados modificados no contexto de execução da página da Web (e, posteriormente, no controlador. escopo).

Para este último, a solução é usar a API de mensagens passadas do Chrome; especificamente, a API projetada para comunicação entre a página da web e a extensão do Chrome (veja aqui ).

Aqui está um exemplo da documentação:

Primeiro, ative a API para o (s) site (s) apropriado (s) no seu arquivo manifest.json:

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

Na página da Web, faça uma solicitação para se conectar à extensão do Chrome. Em seu retorno de chamada, você atualizaria seu modelo:

 // 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(); } }); 

No arquivo background.js sua extensão do Chrome, adicione um ouvinte para a solicitação:

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

Esse processo permitirá que sua extensão do Chrome envie dados para o ambiente de execução correto, permitindo que seu aplicativo AngularJS funcione com ele.

O principal problema é bem explicado na resposta de Jonathan Guerrera: você não pode simplesmente carregar o Angular em sua extensão e esperar que ele funcione porque é uma instância diferente do Angular; o real está em outro contexto JS.


Outra solução possível (embora hacky) é injetar código no contexto da página . Dessa forma, você está manipulando o Angular da página.

Ele pode ser combinado com outros methods de comunicação entre o script de nível de página e o script de conteúdo .