According to chrome extension documentation,

Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).

Read: http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

Use in popup.js as

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', main);      
});
function main() {
    var source = document.getElementById('source').value;
    document.getElementById("result").innerHTML = source;
}

There is a Chrome extension called Shortkeys that may be what you're looking for. It lets you, among other things, map custom JavaScript snippets to keyboard shortcuts. It looks like you need to pay for it if you download it from the chrome web store.

Here is the Github Project for Shortkeys for the source code and documentation.

I work as a web developer and at one point I made a snippet that changes the border of all div elements to be 1px solid black so I can make sure everything was laid out properly. I've even used it in the past to open every link on the current page in its own tab. (Sounds crazy but there was a specific need for that at the time).

Basically, if you can write it in JavaScript, this extension lets you assign it to a keyboard combination and use it in the wild. It does other things too but this ability to run custom JavaScript was the most important to me.

So I think that the simple solution is just to create a content script and there to wait until the page is load :

manifest.json

{
    "manifest_version": 2,
    "name": "Getting started example",
    "description": "This extension shows a Google Image search result for the   current page",
    "version": "1.0",
    "content_scripts": [
        {
            //Set your address you want the extension will work in mataches!!!
            "matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
            "js": ["content.js"],
            "run_at": "document_end"
        }
    ],
    "permissions": ["activeTab", "https://ajax.googleapis.com/"],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

content.js

window.onload=function(){
     console.log("page load!");
}

You could also use with message passing between background.js and your content page and to check that tab is loaded but for your case I think it's enough.

This might help you: Run Javascript in Chrome Extension -> Basic?

copied here for quick reference:

According to chrome extension documentation,

Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).

Read: http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution

Use in popup.js as

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', main);      
});
function main() {
    var source = document.getElementById('source').value;
    document.getElementById("result").innerHTML = source;
}

if you don't want to explicitly create a js file but still want to test your javascript code, you can use snippets to run your JS code.

Follow the steps here:

1. Open Dev Tools
2. Go to Sources Tab
3. Under Sources tab go to snippets, + New snippet
4. Paste your JS code in the editor then run Command + Enter on a Mac, or Ctrl + Enter on Windows or Linux. You should see the output in console if you are using console.log or similar to test. You can edit the current web page that you have open or run scripts, load more javascript files. (Just note: this snippets are not stored on as a js file, unless you explicitly did, on your computer so if you remove chrome you will lose all your snippets);
5. You also have a option to save as your snippet if you right click on your snippet.

Yes, it possible to inject custom scripts when the page is opened. Many browser extensions are available for this like tampermonkey, violentmonkey, requestly. Using requestly extension you can run custom scripts based on the URL of the webpage.

Check them out:

• tampermonkey
• requestly, user script documentation
• violentmonkey

You cannot invoke any methods of an extension from within a web page. However, it's possible to inject a content script into the web page, and use sendMessage and onMessage, or onConnect and connect.

To edit an extension: Visit chrome://extensions page, and enable the Developer mode. Unpack an extension and/or visit the extension's directory. Edit the manifest.json file, and add the necessary lines (see here).

Add an event event listener at the background page. Add a poller in the content script, eg:

// Content script
var poller = window.setInterval(function() {
   if (document.documentElement.getAttribute('extensionCalled')) {
       chrome.extension.sendMessage({"anyname": "anything"}, function() {
           /*optional callback function.*/alert("Something happened")
       });
       clearInterval(poller);
   }
}, 200);

// Background
chrome.extension.onMessage.addListener(function(request, sender, callback) {
    if (request.anyname == "anything") {
        function_logic_here();
        //Optionally, callback:
        callback();
    }
});

See also

• Chrome extension - retrieving Gmail's original message - Using DOM events to communicate between a page and extension (recommended)
• MDN: postMessage - It can be used to communicate between a page and extension (this method may cause conflicts when the page itself is also using the message events).

References:

• Extension messaging
• Content scripts
• Content scripts in extensions