How to run script from a form button

Question

I've been trying to create a custom homepage/new tab extension that uses html to show a bunch of tiles which link to sites that I frequently use.

Screenshot

I think I'm using a somewhat janky way of creating these 'tiles', but long story short I want to get one to execute some javascript in order to open a new incognito window (re here) I've tried using the onclick / onsubmit for the form/button elements to no success & tried giving the form an id then creating an eventlistener for click - also which I couldnt get to work.

Bit of a beginner in this area, any advice on where to start would be appreciated

Code for each of the 'tiles':

<form>
    <button formaction="https://UrlHere">
      <img src=".\AssetHere" />
      <label><span>Description here</span></label>
    </button>
</form>

<script src="newInPrivate.js"></script>

score 0 · Answer 1 · answered Oct 04 '22 at 11:27

I'm pretty sure you don't need any form, just a bunch of buttons.

Whatever you pass to the onclick attribute is executed once the user clicks the button.

I suggest creating a function that receives a URL and using the chrome API to open the tab in incognito. Here is an example of the function implementation, as described here.

function openUrlInNewIncognitoTab(url) {
  chrome.windows.create({
    url, // that's the same as url: url
    incognito: true
  });
}

Then, for each button you display, set the onclick attribute to openUrlInNewIncognitoTab('https://UrlHere').

You'll get a button like this:

<button onclick="openUrlInNewIncognitoTab('https://UrlHere')">
    <img src=".\AssetHere" />
    <label><span>Description here</span></label>
</button>

Hey! Thanks for the answer but i think its blocked by chrome security policy's from running: _Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present._ — Jarv04, Oct 05 '22 at 10:52

score 0 · Accepted Answer · answered Oct 04 '22 at 11:28

You can only do this in an extension

Either use click (simpler)

document.getElementById("buttonDiv").addEventListener("click", e => {
  e.preventDefault()
  windows.create({"url": e.target.getAttribute("formaction"), "incognito": true});
})

<div id="buttonDiv">
  <button formaction="https://google.com">
      <img src=".\AssetHere" />
      <label><span>Description here</span></label>
    </button>
</div>

or submit event handler:

document.getElementById("buttonDiv").addEventListener("submit", e => {
  e.preventDefault()
  windows.create({"url": document.activeElement.getAttribute("formaction"), "incognito": true});
})

<div id="buttonDiv">
<form>
  <button formaction="https://google.com">
      <img src=".\AssetHere" />
      <label><span>Description here</span></label>
    </button>
</form>
</div>

Hey! Awesome thanks for this. Good to know I don't need the forms - not sure where I got that idea Chrome blocks inline scripts too for extensions so I went with your first option with the script snippet `` and placed the .js in an external file. — Jarv04, Oct 05 '22 at 10:58

Ali Sheikhpour · Answer 3 · 2022-10-04T11:28:40.227

You need to pass the target URL as a parameter to that function e.g. if there is a function newInPrivate(url) then :

<form>
    <button onclick="newInPrivate('https://UrlHere')">
      <img src=".\AssetHere" />
      <label><span>Description here</span></label>
    </button>
</form>

If you are looking for a general click listener instead of editing the formaction attributes then:

$(document).ready(function(){
    $('button[formaction]').click(function(e){
        e.preventDefault();
        var targetUrl=$(this).attr("formaction");
        newInPrivate(targetUrl);
        return false;
    })

})

How to run script from a form button

3 Answers3