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

nao 发表于 Dev

不

我正在尝试立即创建我的第一个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);
});

我在尝试弄清楚如何在同一脚本中访问内容页面和弹出窗口的元素时遇到了麻烦。我也有链接到pop-up.html的input.js文件。谢谢您的帮助！

可汗

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

简而言之，您无法在一个脚本中执行此操作，因为弹出窗口和当前打开的页面是不同的上下文。您需要在弹出窗口中使用脚本来处理单击并获取源URL，在页面中使用脚本（内容脚本）来插入文本，并在两者之间进行某种形式的通信。

一种方法是使用Messaging，您可以让内容脚本在弹出窗口中侦听命令。这种方法是有效的，但是我在这里描述了一个小问题：没有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});
  });
});

附注：您需要清单中的"activeTab"许可才能执行此操作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。