Question

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

这是我的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

此页面可能会回答很多问题：Architecture Overview

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

一种方法是使用Messaging，其中内容脚本从弹出窗口中侦听命令。这种方法是有效的，但我遇到了一个小问题here：内容脚本在给定标签中实际上没有100％保修。

在您的情况下，构建一个简短的代码段和inject it into the page programmatically要容易得多。

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

P.S。您需要清单中的"activeTab" permission才能实现此目的。

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

1 个答案: