0

This code is a part of a chrome extension.

manifest.json

{
        "name": "BrowserExtension",
        "version": "0.0.1",
        "manifest_version": 2,
        "description" : "Description ...",
        "browser_action": {
            "default_icon": "icon.png",
            "default_popup": "popup.html"
        },
        "background": {
            "scripts": ["background.js"],
            "persistent": false
        },
        "permissions": ["*://*.google.com/", "tabs", "activeTab", "*://*.facebook.com/"],
        "content_scripts": [{
            "matches": ["http://*/*","http://*/", "https://*.facebook.com/","https://*/*"],
            "js": ["content.js"]
        }]
    }

popup.html

<body>
<pre>
     <input type="button" value="Get Password"  id="link">
</pre> 
<script type="text/javascript" src="content.js"></script>
 </body>

content.js

{
window.open("https://www.facebook.com");
var myUsername = 'ABCD';
var myPassword = 'password';
var loginField = document.getElementById('email');
var passwordField = document.getElementById('pass');
loginField.value = myUsername;
passwordField.value = myPassword;
}

If I leave this code without encapsulating it in any function, then if I open facebook.com, then I can find the values set into their appropriate fields. But, if I change the Content.js to something like:

var x = document.getElementById("link");
x.addEventListener("click", myFunction);
function myFunction()
{
    alert("content.js Started .. ");
window.open("https://www.facebook.com");
var myUsername = 'ABCD';
var myPassword = 'password';
var loginField = document.getElementById('email');
var passwordField = document.getElementById('pass');
loginField.value = myUsername;
passwordField.value = myPassword;
}

then click on the button, facebook is being opened but the fields are not set. I would really want to be able to do that even when the code is in a function block.

Sandeep Kotha
  • 1
  • 1
  • is this a typo: `var myPassword = 'password''`?? – ibrahim mahrir Apr 04 '17 at 10:18
  • Does the alert pops up??? – ibrahim mahrir Apr 04 '17 at 10:20
  • Yes it is a typo. And also, the alerts are popping. – Sandeep Kotha Apr 04 '17 at 11:05
  • 3
    See the [extension architecture overview](https://developer.chrome.com/extensions/overview#arch): the popup is a separate window with a separate DOM. Just because you named the file `content.js` doesn't magically make it a content script when it's referenced in the wrong place (in popup.html). – wOxxOm Apr 04 '17 at 12:07
  • Unless you *really know* that you should be using the same JavaScript file for multiple roles (e.g. popup script, and content script), then you should have separate files which contain the code for those roles. It is quite unusual for code to be shared between those roles, other than libraries, etc. Doing so usually creates problems. – Makyen Apr 04 '17 at 14:35
  • When you have your code in the `myFunction()`, why do you think your code will execute, as a content script, prior to there being a `click` event on an element with the ID of `link` (which may, or may not exist in the web page)? – Makyen Apr 04 '17 at 14:41
  • What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? In particular, the consoles for your popup and content script. – Makyen Apr 04 '17 at 14:41
  • @Mayken I want the myFunction() to execute only after the click event and that too on that button whose ID is link. But, even when I click, only the alert is popping up – Sandeep Kotha Apr 05 '17 at 03:03

0 Answers0