加载新页面 - 从内容脚本

时间:2017-03-30 13:29:42

标签: javascript jquery html google-chrome-extension

我尝试制作Chrome扩展程序,填写需求表单字段并继续下一页。扩展有两个按钮,一个用于填写所需字段中的表单,另一个用于提交以继续下一页。两者都很完美。现在我添加了新的按钮跳转,它接收目标页面并进行填充 - 继续直到达到目标页面。

的manifest.json

{
 "manifest_version":2,

 "name":"My App Name",
 "description":"Description",
 "version":"1.0",
 "background": {
    "scripts": ["background.js"]
 },
 "page_action": {
    "default_icon":"icon.png",
    "default_popup":"popup.html"
 },
  "permissions": [
    "tabs",
    "notifications",
    "http://*/",
    "https://*/",
    "storage"
]
}

popup.html

<!doctype html>
<html>
    <head>
        <title>Page Filler</title>
        <link rel="stylesheet" type="text/css" href="popup.css">
        <script src="jquery-2.1.4.min.js"></script>
        <script src="popup.js"></script>
    </head>
    <body>
        <div class="popup"> 
            <button type="button" class="script" id="fill">Fill Page</button>
            <button type="button" class="script" id="continue">Next Page</button>
            <select id="pages" class="dropdown">
                <option value="0">first page</option>
                <option value="1">second page</option>
                <option value="2">third page</option>
                <option value="3">forth page</option>
            </select>
            <button type="button" class="button" id="jump">Jump</button>
        </div>
    </body>
</html>

popup.js (与跳转功能相关的脚本)

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('jump').addEventListener('click', jumpPage);
});

function jumpPage() {
    chrome.tabs.executeScript({file: "jquery-2.1.4.min.js"});
    chrome.tabs.executeScript({file: "jump.js"});
}

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    selectedPage = document.getElementById("pages").value;
    currentPage = (request.pageNum).split(" ")[1];
    if (currentPage) {
        selectedPageInt = parseInt(selectedPage);
        currentPageInt = parseInt(currentPage);
        console.log(selectedPage + " showing something !! " + currentPage);
        if (currentPageInt < selectedPageInt) {
            fillPage();
            nextPage();
        }else {
            alert("Sorry Sir ! I can't take you back !");
        }
    } else {
        alert("Hey Dude ! You are on wrong tab !!");
    }
    if(request.loaded){
        jumpPage();
    }
});

内容脚本jump.js

javascript:
    var pageNumber = document.getElementsByTagName('meta')["pageNum"].getAttribute('content');
    chrome.runtime.sendMessage({   pageNum: pageNumber });

    document.onload = function () {
        console.log('onload');
        notifyNewPageLoaded();
    };

    function notifyNewPageLoaded() {
        chrome.runtime.sendMessage({   loaded: true });
    }
void 0;

单击跳转按钮时,它会填充当前页面的必填字段并继续下一页。但是这个过程在目标页面之前不再重复。我在这里尝试的是当页面加载到下一页时,内容脚本应该发送加载的消息为true并重复填充并继续进程。这不是办法,也无法弄清楚如何通知下一页被加载到popup.js。

0 个答案:

没有答案