使用popup.html中的数据填充表单(Fill forms with a data from popup.html)

编程入门 行业动态 更新时间:2024-10-26 00:19:10
使用popup.html中的数据填充表单(Fill forms with a data from popup.html)

我一直在尝试创建一个扩展,用弹出的数据填充表单,我对使用“背景”和“内容”文件有点困惑,我认为我不需要。 这是我的代码:

表现:

{ "name": "Browser action for Form", "description": "Fill a form with data from the popup", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "Form Test", "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["https://the-site-with-a-form.com/*"], "js": ["jquery-3.1.1.min.js", "content.js"] } ], "manifest_version": 2 }

popup.html

<!doctype html> <html> <head> <title>Form</title> <script src="popup.js"></script> </head> <body> <form> <textarea id="txtArea"></textarea> <input type="button" id="btn1" value="Run"> </form> </body> </html>

popup.js

function click(){ var text = document.getElementById("txtArea") chrome.tabs.sendMessage( tabs[0].id, {from: 'popup', subject: 'DOMInfo',data1: text}); }

content.js

chrome.runtime.onMessage.addListener(function (msg, sender, response) { if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) { //Fill the form with the data of the popup document.getElementById("The textbox from the form").value = msg.data1; } });

代码有什么问题? 谢谢!

I have been trying to create an extension that fills a form with data from a popup, I'm a bit confused regarding the use of "background" and "content" files, I don't think I need one. Here is my code:

Manifest:

{ "name": "Browser action for Form", "description": "Fill a form with data from the popup", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "Form Test", "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "matches": ["https://the-site-with-a-form.com/*"], "js": ["jquery-3.1.1.min.js", "content.js"] } ], "manifest_version": 2 }

popup.html

<!doctype html> <html> <head> <title>Form</title> <script src="popup.js"></script> </head> <body> <form> <textarea id="txtArea"></textarea> <input type="button" id="btn1" value="Run"> </form> </body> </html>

popup.js

function click(){ var text = document.getElementById("txtArea") chrome.tabs.sendMessage( tabs[0].id, {from: 'popup', subject: 'DOMInfo',data1: text}); }

content.js

chrome.runtime.onMessage.addListener(function (msg, sender, response) { if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) { //Fill the form with the data of the popup document.getElementById("The textbox from the form").value = msg.data1; } });

what is wrong in the code? Thanks!

最满意答案

请学习调试扩展弹出窗口 。 如果您这样做,您将看到提供信息的错误消息。

考虑到这一点,弹出代码中的tabs不会来自任何地方 - 因此您的代码会因错误而停止。 很显然,这部分内容被剥离了(很可能是tabs.query调用)。 请注意,如果您的意图是向当前活动的选项卡发送消息,则可以完全跳过sendMessage的第一个参数。

你肯定需要一个内容脚本,因为它是扩展的唯一部分,可以与网页的表单交互。 推荐阅读: 所有类型的Chrome扩展程序如何运作?

Please learn to debug extension popups. If you did, you would see an informative error message.

With that in mind, tabs in your popup code doesn't come from anywhere - so your code there stops with an error. Clearly, that part is ripped out of context (of a tabs.query call, most likely). Note that if your intent is to message the currently active tab, you can just skip the first argument of sendMessage entirely.

You defintiely do need a content script, since it's the only part of an extension that can interact with a webpage's form. Recommended reading: How do all types of Chrome extension scripts work?

更多推荐

本文发布于:2023-08-04 07:44:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1412443.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:表单   数据   html   popup   forms

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!