Javascript 使用第'页；s角JS在chrome扩展中的应用

我有一个HTML页面，其中一些DOM配置为Angular。现在我正在构建一个chrome扩展来修改文本框中的值

element.value=newValue

将不起作用，因为文本框设计为角度。在阅读了一些参考资料之后，我知道我需要对元素的范围进行更改。我试着在分机上这样做

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

这似乎没有达到预期效果。当我深入研究这个问题时，我发现窗口范围内的角度没有得到正确的范围

我还尝试从扩展插件中注入angular.js，并直接使用

angular.element

，这似乎也无法解决问题

---

我错过了什么吗。感谢您的回复。

尽管您的网页和Chrome扩展的内容脚本共享同一个DOM，但它们有单独的JS执行上下文。换句话说，尽管在Chrome扩展中通过

angular.element（）.scope（）

抓取元素，但仍然无法访问正确的scope对象。（有关详细信息，请参阅。）

为了将修改后的数据从Chrome扩展获取到页面上，您可以通过内容脚本操作DOM，或者采取一些额外的步骤将修改后的数据获取到网页的执行上下文中（以及随后的控制器范围中）

对于后者，解决方案是使用Chrome的消息传递API；具体来说，API设计用于在网页和Chrome扩展之间进行通信（请参阅）

以下是文档中的一个示例：

首先，为manifest.json文件中的相应网站启用API：

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

在网页中，请求连接到Chrome扩展。在回调中，您将更新模型：

// 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扩展名的

background.js

文件中，为请求添加一个侦听器：

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

---

此过程将允许您的Chrome扩展将数据发送到正确的执行环境中，从而允许您的AngularJS应用程序使用它

尽管您的网页和Chrome扩展的内容脚本共享同一个DOM，但它们有单独的JS执行上下文。换句话说，尽管在Chrome扩展中通过

angular.element（）.scope（）

抓取元素，但仍然无法访问正确的scope对象。（有关详细信息，请参阅。）

为了将修改后的数据从Chrome扩展获取到页面上，您可以通过内容脚本操作DOM，或者采取一些额外的步骤将修改后的数据获取到网页的执行上下文中（以及随后的控制器范围中）

对于后者，解决方案是使用Chrome的消息传递API；具体来说，API设计用于在网页和Chrome扩展之间进行通信（请参阅）

以下是文档中的一个示例：

首先，为manifest.json文件中的相应网站启用API：

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

在网页中，请求连接到Chrome扩展。在回调中，您将更新模型：

// 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扩展名的

background.js

文件中，为请求添加一个侦听器：

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

---

此过程将允许您的Chrome扩展将数据发送到正确的执行环境中，从而允许您的AngularJS应用程序使用它

嗯。。实际上，您应该能够使用普通Javascript或JQuery更改值，并且不需要更新范围，因为它是双向绑定的，即更新视图会更新模型，反之亦然

模型不更新的唯一原因是，观察者仅在“单击”或“输入”等特定事件上更新模型触发器

因此，这里的解决方案是手动触发这些事件。 这可以通过以下方式实现：

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

最后一条语句将为“input”事件触发元素上的所有处理程序（这将触发angular watchers）并更新范围。 有关触发器功能的更多信息：

---

嗯。。实际上，您应该能够使用普通Javascript或JQuery更改值，并且不需要更新范围，因为它是双向绑定的，即更新视图会更新模型，反之亦然

模型不更新的唯一原因是，观察者仅在“单击”或“输入”等特定事件上更新模型触发器

因此，这里的解决方案是手动触发这些事件。 这可以通过以下方式实现：

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

最后一条语句将为“input”事件触发元素上的所有处理程序（这将触发angular watchers）并更新范围。 有关触发器功能的更多信息：

---

Jonathan Guerrera很好地解释了主要问题：您不能在扩展中加载Angular并期望它工作，因为它是Angular的一个不同实例；真正的是在另一个JS上下文中

---

另一个可能的解决方案（尽管有些老套）是。这样，实际上就是在操纵页面自身的角度

---

它可以与其他通信方法相结合。

Jonathan Guerrera很好地解释了主要问题：您不能在扩展中加载Angular并期望它工作，因为它是Angular的不同实例；真正的是在另一个JS上下文中

---

另一个可能的解决方案（尽管有些老套）是。这样，实际上就是在操纵页面自身的角度

它可以与其他通信方法相结合