Question

我有以下文件

的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>

还有两个JavaScript文件 page1.js 和 page2 。

page1.js

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

Page2.js

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

我开发了Chrome扩展程序。在我点击Chrome扩展程序图标的第一页上，根据https://myblog.com/page1页面的JavaScript文件（ page1.js ），该功能正常运行。

在page1.js的帮助下，我在https://myblog.com/page1页面上所做的只是点击按钮移动到https://myblog.com/page2的第二页。现在我希望page2.js应该在页面https://myblog.com/page2上以脚本（page2.js）的形式出现，但它不起作用。

当我点击第1页上的扩展程序图标然后再次点击第2页上的扩展程序图标时，脚本运行良好。

但是我想扩展图标应该在第1页上点击，而不是重复。

编辑了问题

添加了page1.html和page2.html
page1.js和page2.js

是否可以这样做。如果是，我在做错误的地方？

Answer 1

这是你需要做的。您的代码块chrome.browserAction.onClicked.addListener(function (tab) {仅在您单击图标时才执行JS功能。这就是为什么你的Page 1有效，而不是。

您希望在Page2.html正确打开后立即运行 page2.js 吗？因此，请更改Page2.html的编码。在 page2.html 本身添加以下代码。

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

这样做，只要加载Page2.html，它就会执行Javascript。虽然它适用于大多数浏览器，但对于IE 8及以下版本，它不会出现。

如果您还需要IE 8及更低版本，请尝试使用以下代码：

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

window.onload=funtionToBeCalled;
</script>

在两个不同的页面上执行浏览器操作

1 个答案: