Chrome扩展:在弹出窗口中单击按钮时，将文本插入文本字段。

Question

我现在正在尝试创建我的第一个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。谢谢你的帮助！

Answer 1

这个页面可能会回答很多问题：体系结构概述

简而言之，您不能在一个脚本中这样做，因为弹出窗口和当前打开的页面是不同的上下文。您需要弹出窗口中的脚本来处理单击并获取源URL、页面中插入文本的脚本( 内容脚本)以及两者之间的某种形式的通信。

一种方法是使用消息传递，您可以让内容脚本监听弹出窗口中的命令。这种方法是有效的，但有一个小问题，我描述了这里：没有100%的保证内容脚本实际上已经在给定的选项卡中准备好了。

在您的例子中，只构造一个简短的代码段和以编程方式将其插入页面。就容易多了。

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

你需要你的舱单上的权限才能让它起作用。