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

标签 google-chrome-extension google-chrome-devtools google-chrome-app

我有以下文件

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
 }

背景.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 第2页 .

page1.js

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

Page2.js

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

我开发了一个 Chrome 扩展程序。在第一页上,当我单击 Chrome 扩展程序图标时,根据 JavaScript 文件 ( page1.js ) for https://myblog.com/page1 功能运行良好页。

以及我在 https://myblog.com/page1 上所做的事情page1.js 的帮助下的页面是只需单击一个按钮即可移动到第二页,即 https://myblog.com/page2 .现在我希望 page2.js 应该在页面 https://myblog.com/page2 上工作作为脚本(page2.js),但它不工作。

当我单击 page1 上的扩展图标然后再次单击 page2 上的扩展图标时,脚本运行良好。

但我想扩展图标应该在 page1 上单击而不是重复。

编辑问题
  • 添加 page1.html 和 page2.html
  • page1.js 和 page2.js

  • 是否有可能做同样的事情。
    如果是,我在哪里做错了?

    最佳答案

    这是你需要做的。
    您的代码块 chrome.browserAction.onClicked.addListener(function (tab) {使 JS 函数仅在您单击图标时执行。这就是为什么您的第 1 页有效而第 2 页无效的原因。

    你想要 page2.js 打开 Page2.html 后立即运行,对吗?因此更改 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>
    

    关于google-chrome-extension - 在两个不同的页面上执行浏览器操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30099894/

    相关文章:

    javascript - 如何从常规网站调用 Chrome 扩展中定义的函数?

    html - 如何卡住 dom 树的状态(不使用 js "debugger"语句)来检查它?

    css - 如何将 Chrome DevTools 计算尺寸更改为毫米?

    google-chrome - 使用目标 ='_blank' 链接自动打开 Chrome 开发工具?

    google-chrome - 手动安装的 Chrome 应用程序的 CRX 大小是否有限制?

    google-chrome-extension - 将文件类型与 Chrome Packaged App 关联

    google-chrome-app - 如何使用基于 webview 的 Chrome 托管应用程序保留 cookie

    javascript - 制作 "background"Chrome扩展修改当前页面的代码

    javascript - js Chrome 扩展的 js 事件(在每个选项卡上工作已加载页面)

    javascript - 事件不会在内容脚本 Chrome 扩展程序上触发