如何在Chrome扩展程序的网页表单中填写文本字段？ [英] How to fill out a textfield within a form on a webpage from a chrome extension?

问题描述

到目前为止，我有一个扩展，列出用户所在的网页和一个按钮。该按钮应该在单击时，用testing123填充文本字段。

在我测试的网页上，表单有一个id和名称form，而textfield有一个id和名称body。

如果我可以得到一些帮助填写这个文本字段或一个一般的文本字段，将非常感谢。

这里是我到目前为止的文件：

manifest.json / p>

 
 
 {
name：Extension Menu，
version：1.0 ，
manifest_version：2，
description：我的扩展程序，
browser_action：{
default_icon：icon.png，
default_menu：Menu，
default_popup：popup.html
}，
icons：{
128：icon.png 
}，
permissions：[
tabs，http：// * / *，activeTab
] 
} 
 
 

popup.html

 < p id =currentLink>正在加载...< / p> 
< hr /> 
< ul id =savedLinks>< / ul> 
< script type =text / javascriptsrc =popup.js>< / script>< br> 
< button type =buttononclick =在文本框中填写testing123字样> Go！< / button> 
  

popup.js

$ b b

 
 
 chrome.tabs.getSelected（null，function（tab）{
 // $（＃body）。val（testing123）; 
 // document.getElementById（'body'）。value ='testing123'; 
 document.getElementById（'currentLink'）。innerHTML = tab.url; 
}）; 
 
 

我已尝试使用：

1. $（＃body）。val（testing123）;



2. p> document.getElementById（'body'）。value ='testing123';

，但它们似乎不起作用。

解决方案

popup 。您应该使用内容脚本来执行此操作。 内容脚本在网页上下文中运行。

将其添加到您的清单：

 content_scripts：[
 {
matches：[
http：//www.example。 com / *
]，
js：[
jquery.js，
myscript.js
] 
} b $ b  

myscript.js ：

$ b b

  $（＃body）。val（testing123）; 
 
 document.getElementById（'body'）。value ='testing123'; 
  

So far I have got an extension that lists out the webpage the user is on and a button. The button should, when clicked, fill in the textfield with "testing123".

On the webpage where I am testing the form has a id and name "form" and the textfield has an id and name "body".

If I could get some help filling in this textfield or a general textfield it would be greatly appreciated.

Here are the files I have so far:

manifest.json

    {
      "name": "Extension Menu",
      "version": "1.0",
      "manifest_version": 2,
      "description": "My extension",
      "browser_action": {
        "default_icon": "icon.png",
        "default_menu": "Menu",
        "default_popup": "popup.html"
      },
      "icons": {
        "128": "icon.png"
      },
      "permissions": [
          "tabs", "http://*/*", "activeTab"
        ]
    }

popup.html

<p id="currentLink">Loading ...</p>
<hr />
<ul id="savedLinks"></ul>
<script type="text/javascript" src="popup.js"></script><br>
<button type="button" onclick="fill in text box with the word 'testing123'">Go!</button>

popup.js

    chrome.tabs.getSelected(null, function(tab) {
      // $("#body").val("testing123");
      // document.getElementById('body').value = 'testing123';
      document.getElementById('currentLink').innerHTML = tab.url;
    });

I have tried using:

1. $("#body").val("testing123");

2. document.getElementById('body').value = 'testing123';

but they do not seem to be working.

解决方案

You can't access the webpage directly from popup. You should use content scripts to do this. Content scripts run in the context of the webpage.

Add this to your manifest :

"content_scripts": [
        {
            "matches": [
                "http://www.example.com/*"
            ],
            "js": [
                "jquery.js",
                "myscript.js"
            ]
        },

myscript.js :

$("#body").val("testing123");

document.getElementById('body').value = 'testing123';

这篇关于如何在Chrome扩展程序的网页表单中填写文本字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！