Javascript Chrome扩展：单击弹出窗口中的按钮时将文本插入文本字段

我现在正在尝试创建我的第一个Chrome扩展。这是一个简单的弹出窗口，里面有许多树懒的图片。我想做的是，当你点击树懒的图片时，它会将图片URL附加到内容页的当前文本字段中

这是我的JSON：

{
"manifest_version": 2,

"name" : "Instant Sloth",
"description": "One button, many sloth.",
"version": "1",

"permissions": [
    "https://secure.flickr.com/"
],

"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
},
"content_scripts": [{
    "js": ["jquery.min.js", "tab.js", "jquery-ui.min.js", "input.js"],
    "matches": ["http://*/*", "https://*/*"],
    "run_at": "document_end"
    }]
}

其中popup.html是包含树懒图片的html文件，input.js是我希望能够增加交互性的脚本，如下所示：

$("img").click(function(){
var form = $(document.activeElement);
var sloth = $(this).attr('src');
form.value = (form.value + " " + sloth);
});

---

我在试图找出如何在同一脚本中访问内容页和弹出窗口的元素时遇到了问题。我还将input.js文件链接到pop-up.html。谢谢你的帮助

此页面可能会回答许多问题：

简而言之，您不能在一个脚本中实现这一点，因为弹出窗口和当前打开的页面是不同的上下文。在弹出窗口中需要一个脚本来处理点击并获取源URL，在页面（a）中需要一个脚本来插入文本，以及两个页面之间的某种形式的通信

一种方法是使用，让内容脚本监听弹出窗口中的命令。这种方法是有效的，但有一个我描述过的小问题：没有100%的保证内容脚本在给定的选项卡中实际就绪

在您的情况下，只需构造一个简短的代码段并进行修改就容易多了

---

请注意，您需要在您的清单中添加此项才能生效。

此页面可能会回答许多问题：谢谢。我在试着理解程序注入。。。因此，如果我将该代码放入input.js并将其链接到HTML文件，行“chrome.tabs.executeScript（{code:script}）；”将导致它在当前的选项卡上执行？我是否需要将其链接到清单的内容脚本部分？另外，还有一个问题是，当我单击omnibar上的弹出图标时，活动的“窗口”将成为弹出窗口，因此内容页中不再有活动元素。。。您是否知道有什么方法可以防止这种情况发生（即在不切换activeElement的情况下显示弹出窗口？）如果您使用我的代码，则不需要清单中的

content\u scripts

部分。你自己决定什么时候注入代码——这样可以节省资源，因为你的代码并没有被加载到每个选项卡中。那么，你就不知道发生了什么。再次阅读概述

executeScript

将获取当前打开的选项卡（除非您为其提供另一个选项卡ID）并在那里执行代码，而不是在弹出窗口中执行代码。因此，

文档

将引用活动选项卡，而不是弹出窗口。另外，请参阅我的关于权限的编辑。我想我已经开始理解了。我会继续胡闹的。谢谢你！！

// Popup code
$(document).ready(function() {
  $("img").click(function() {
    var sloth = $(this).attr('src');
    var script = 'var form = document.activeElement;' +
      + 'form.value = (form.value + " ' + sloth + '");';
    chrome.tabs.executeScript({code : script});
  });
});