2

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.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
ayaz15m
  • 25
  • 1
  • 1
  • 4
  • where is it in your code #body? write it in your sample popup.httml – Dave Aug 03 '14 at 17:47
  • #body is in the tab where the search bar is and its id/name is body. Would you like to see the code for the form on the webpage? – ayaz15m Aug 03 '14 at 18:00

1 Answers1

1

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';
PG1
  • 1,220
  • 2
  • 12
  • 27
  • thank you! that seems to work when the page is first loaded. Do you know how I could do it so the value is loaded in the textfield once the button is clicked? – ayaz15m Aug 03 '14 at 18:27
  • @ayaz15m : Either you can directly add the button to the page through this content script and add `onclick event` to it, OR , you should use (message passing)[https://developer.chrome.com/extensions/messaging]. In message passing button click on `popup` will send a message to the `content script` to run the onclick event on the webpage. – PG1 Aug 03 '14 at 19:10
  • would the onclick event occur when the extension button is clicked or the button in the popup. I would like it to occur when the button in the popup is clicked. Would it work the same as what you described? – ayaz15m Aug 03 '14 at 21:35
  • Can give my button and id="btn" and put the contents of myscript.js inside of: $('#btn').click(function(){ //current code }); Would something like that work? – ayaz15m Aug 03 '14 at 22:02