Chrome扩展程序：点击弹出式窗口中的按钮时，将文本插入文本框 [英] Chrome Extensions: Insert text into textfield when clicking button in pop-up

问题描述

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

这是我的JSON：

  {
manifest_version：2，
 
名称：Instant Sloth，
description：一个按钮，许多树懒。，
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 for m = $（document.activeElement）; 
 var sloth = $（this）.attr（'src'）; 
 form.value =（form.value ++懒惰）; 
}）; 
  

我在试图弄清楚如何访问内容页面和流行元素在同一个脚本中。我也有链接到pop-up.html的input.js文件。感谢您的帮助！

解决方案

此页面可能会回答很多问题：架构概览

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

一种方法是使用 Messaging ，其中您的内容脚本正在侦听弹出窗口中的命令。这种方法是有效的，但有一个小问题，我描述了这里：内容脚本实际上没有100％的担保准备好在给定的选项卡中。

在你的情况中，仅仅构建一个简短的代码片段和以编程方式将其注入到页面中。

  //弹出代码
 $（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权限在你的清单中，这样才能正常工作。

I'm trying to create my first Chrome extension right now. It's a simple pop-up window with a number of pictures of sloths in it. What I'm trying to do is make it so that when you click on the picture of the sloth it appends the image URL into the current text field in the content page.

Here is my 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"
    }]
}

Where popup.html is the HTML file with the pictures of the sloths, and input.js is the script that I'm hoping will add interactivity, like here:

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

I'm having trouble trying to figure out how to access elements of both the content page and the pop-up within the same script. I also have the input.js file linked to pop-up.html. Thanks for the help!

解决方案

This page may answer a lot of questions: Architecture Overview

In short, you can't do that in one script, because the popup and the current open page are different contexts. You need a script in the popup that handles the click and gets the source URL, a script in the page (a Content Script) that inserts the text, and some form of communication between two.

One approach is to use Messaging, where you have the content script listening for a command from the popup. This approach is valid, but has a slight problem I described here: there is no 100% warranty that the content script is actually ready in a given tab.

In your case, it's much easier to just construct a short code snippet and 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. You will need the "activeTab" permission in your manifest for this to work.

这篇关于Chrome扩展程序：点击弹出式窗口中的按钮时，将文本插入文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！