CODEWITHSUNDEEP
google-chrome-extensiongoogle-chrome-devtoolsgoogle-chrome-app
Dinesh Chandra
Dinesh Chandra

Reputation: 329

Performing browser action on two different pages

I have below files with me

manifest.json

{
        "name": "Get Response URL",
        "version": "1.0",
        "manifest_version": 2,
        "name": "Test" ,
        "browser_action": {
        "icon":"icon.png"
        },
        "background": {
        "persistent": false,
        "scripts": ["background.js"]
         },
        "browser_action": {
        "default_icon": "icon.png"
      },
        "permissions":["https://myblog.com/*"] ,//Put All your URL here
        "manifest_version": 2
 }

background.js

chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON

    if (tab.url.indexOf("https://myblog.com/page1.html")==0) { // Inspect whether the place where user clicked matches with our list of URL
        chrome.tabs.executeScript(tab.id, {
            "file": "page2.js"
        }, function () { // Execute your code
            console.log("Script Executed .. "); // Notification on Completion
        });

    }
    else  if (tab.url.indexOf("https://myblog.com/page2.html")==0) { // Inspect whether the place where user clicked matches with our list of URL
        chrome.tabs.executeScript(tab.id, {
            "file": "page1.js"
        }, function () { // Execute your code
            console.log("Script Executed .. "); // Notification on Completion
        });
    }
});

Page1.html

<html>
<head>
<title>Page1</title>
</head>
<body>
<input type='button' name='submit' id='myBtn' value='click here to move to next page' onclick="document.location.href='page2.html';" />
</body>
</html>

page2.html

<html>
<head>
<title>Page2</title>
</head>
<body>
<input type="text" name="textBox" id="myText" />
</body>
</html>

And to two JavaScript files page1.js and page2.

page1.js

var button=document.getElementById("myBtn");
button.click();

Page2.js

document.getElementById("myText").value="Text Box";

I have developed a Chrome extension. On first page when I click the Chrome extension icon the functionality is working good as per JavaScript file(page1.js) for https://myblog.com/page1 page.

And what I am doing on https://myblog.com/page1 page with the help of page1.js is to just click a button to move to second page that is https://myblog.com/page2. Now I want that page2.js should wrok on page https://myblog.com/page2 as scripted(page2.js) but its not working.

Script is working good when I click the extension icon on page1 and then again click the extension icon on page2.

But I want to extension icon should be clicked on page1 not repetitively.

Edited the Question

Is it possible to doing the same. If yes where I am doing the mistake?

Upvotes: 4

Views: 2122

Answers (1)

Vinod Tigadi
Vinod Tigadi

Reputation: 859

here's what you need to do. Your code block chrome.browserAction.onClicked.addListener(function (tab) { makes the JS functions to execute only when you click the icon. That's why your Page 1 works whereas the Page 2 doesn't.

You want the page2.js to run as soon as the Page2.html is opened right? Hence change the coding of your Page2.html. Add the below code in the page2.html itself.

document.addEventListener("DOMContentLoaded", function(event) { //Do work });

What this will do is, as soon as the Page2.html is loaded, it will execute the Javascript. Eventhough it works in most of the browsers, but for IE 8 and below it won't.

If you need for IE 8 and below too, then try using the following code:

<script type="text/JavaScript">
function funtionToBeCalled(){
// code that will be exected after dom ready
}

window.onload=funtionToBeCalled;
</script>

Upvotes: 1

Related Questions