阅读当前标签的所有图片并显示到IFrame中，并将框架附加到Chrome扩展程序中的当前页面

时间：2017-05-03 12:52:47

标签： javascript jquery html iframe google-chrome-extension

阅读当前标签的所有图片并绑定到另一个页面，将另一个页面加载到IFrame中，并在Chrome扩展程序中将Iframe显示到当前页面 所有代码工作正常，但newTab.html中的newTab.js文件未加载。

我想要这样的输出。

Output

的manifest.json 

{
  "name": "Demo",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "practice",
  //"icons": {
  //  "16": "icons/icon16.png",
  //  "48": "icons/icon48.png",
  //  "128": "icons/icon128.png"
  //},
  //"default_locale": "en",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "browser action demo"
  },
  "permissions": ["tabs","https://*/*", "http://*/*", "<all_urls>","activeTab","cookies","bookmarks","file://*/*","http://myapp.com/*","https://myapp.com/*"],
  "content_scripts": [
    {
      "matches": [
        "https://*/*",
        "http://*/*",
        "http://myapp.com/*",
        "https://myapp.com/*"
      ],      
      "css":["bootstrap.css","myscript.css"],
      "js": ["content.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "web_accessible_resources": ["newTab.html"]
}

background.js 

chrome.browserAction.onClicked.addListener(function () {    
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        var url = tabs[0].url;
        var title = tabs[0].title;
        console.log(url);       

        function getCookies(domain, name, callback) {
            chrome.cookies.get({ "url": domain, "name": name }, function (cookie) {
                if (callback) {
                    callback(cookie ? cookie.value : null);
                }
            });
        }
        //usage:
        getCookies("http://myapp.com", "stakUserid", function (stakUserid) {
            if (stakUserid != null || stakUserid != undefined) {
                LoadImages();
                console.log(StackUserID);
            } else {

                RedirectToStackView(stakUserid);
            }
        });
        //chrome.tabs.sendMessage(tabs[0].id, { message: "getCookie" }, function (response) {
        //    var html = response.html;
        //    var obj = {
        //        tabUrl: url,
        //        tabHtml: html
        //    };
        //    if (html == null || html == undefined) {
        //        RedirectToStackView(obj);
        //    }

        //});
        function LoadImages() {            
            chrome.tabs.sendMessage(tabs[0].id, { message: "getImages" }, function (response) {
                var html = response.html;
                var obj = {
                    tabUrl: url,
                    tabTitle:title,
                    tabHtml: html
                };
                //createNewtab(obj);            


                OpenPopUp(obj);
                chrome.tabs.sendMessage(tabs[0].id, { message: "openModal" }, function (response) {
                    var html = response.html;
                });
            });

        }

    });
});
function RedirectToStackView(StackUserID) {
    var targetId = null;
    console.log("In New Tab " + StackUserID);
    //alert(obj.html);
    var newTabUrl = 'http://myappdemo.com:5002';

    chrome.tabs.create({ url: newTabUrl });
}
function OpenPopUp(obj) {
    var targetId = null;
    chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {

        if (tabId != targetId || changedProps.status != "complete")
            return;

        chrome.runtime.sendMessage({ message: "loadNewTab", data: obj });

    });


        //var newTabUrl = chrome.extension.getURL('newTab.html');
        //chrome.tabs.create({ url: newTabUrl }, function (tab) {
        //    targetId = tab.id;

        //});
}
function createNewtab(obj) {
    var targetId = null;
    chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {

        if (tabId != targetId || changedProps.status != "complete")
            return;
        chrome.tabs.executeScript({
            file: '/newTab.js'
        });
        chrome.runtime.sendMessage({ message: "loadNewTab", data: obj });

    });

    //var newTabUrl = chrome.extension.getURL('newTab.html');
    //chrome.tabs.create({ url: newTabUrl }, function (tab) {
    //    targetId = tab.id;
    //});
}

content.js 

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    switch (request.message) {
        case "getImages":
            var images = [];
            var title = [];
            var pagetitle = document.title;
            var currentdocimg = document.images;
            for (var i = 0; i < currentdocimg.length; i++) {
                images.push(currentdocimg[i].src);
                title.push(currentdocimg[i].alt);
            }              

            var data = { Images: images, Title: title, PageTitle: pagetitle }
            sendResponse({ html: data });
            break;
        case "openModal":
            var iFrame = document.createElement("iframe");
            iFrame.src = chrome.extension.getURL("newTab.html");
            iFrame.style = "display: block !important; width: 80% !important; height: 90% !important; top: 5% !important; right: 0px !important; overflow: hidden !important; position: fixed !important; border: 0px !important; background-color: transparent !important; z-index: 8675339 !important; left: 10% !important;";
            document.body.insertBefore(iFrame, document.body.firstChild);            
            var data = { success: "success" }
            sendResponse({ html: data });
            break;           
        case "closeModal":
            $('#myModal').modal("hide");
            break;

    }
});

newTab.html 

<!DOCTYPE html>
<html>
<head>
    <style>
        .navbar {
            border-radius: 0px !important;
        }

        .savebtn {
            display: inline-block;
            position: absolute;
            margin-top: 15px;
            margin-left: 15px;
        }

        .saveimagediv {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .saveimg {
            display: inline-block;
        }

        .displaynone {
            display: none;
        }



        body {
            background: #fff;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            width: auto;
            height: auto;
        }

        * {
            -webkit-box-sizing: border-box;
        }

        .GRID_1492146176379_hd {
            background: rgba(255,255,255,1) url(icon.png) 20px 50% no-repeat;
            color: #333;
            height: 65px;
            line-height: 65px;
            font-size: 24px;
            font-weight: bold;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            text-align: left;
            text-indent: 65px;
        }

            .GRID_1492146176379_hd .GRID_1492146176379_x {
                z-index: 10;
                opacity: .5;
                position: absolute;
                right: 25px;
                top: 0;
                cursor: pointer;
                height: 65px;
                width: 25px;
                background: transparent url(cross.png) 50% 50% no-repeat;
            }

                .GRID_1492146176379_hd .GRID_1492146176379_x:hover {
                    opacity: 1;
                }

        .GRID_1492146176379_grid {
            display: block;
            margin: 72px 0 0 58px;
        }



            .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb {
                border-radius: 8px;
                margin: 0 0 0 -10px;
                display: block;
                background: #fff;
                vertical-align: top;
                overflow: hidden;
                cursor: pointer;
                position: relative;
                border: 3px solid #fff;
            }

                .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb img {
                    border: 1px solid #fff;
                    border-radius: 8px;
                }

                    .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb img:hover {
                        border-color: red !important;
                    }

        .imageselected {
            border-color: red !important;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_mask {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_saveButton {
            position: absolute;
            top: 10px;
            left: 10px;
            width: auto;
            border-radius: 4px;
            background: #bd081c url(pin.png) 10px 9px no-repeat;
            background-size: 15px 20px;
            padding: 0 15px 0 0;
            text-indent: 26px;
            color: #fff;
            font-size: 14px;
            line-height: 36px;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-style: normal;
            font-weight: bold;
            text-align: left;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            opacity: 0;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_searchButton {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 36px;
            width: 36px;
            border-radius: 4px;
            background: rgba(0,0,0,.4) url(pin.png) 50% 50% no-repeat;
            background-size: 20px 20px;
            opacity: 0;
            z-index: 100;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb:hover .GRID_1492146176379_saveButton, .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb:hover .GRID_1492146176379_searchButton, .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb:hover .GRID_1492146176379_ft .GRID_1492146176379_dimensions {
            opacity: 1;
        }





        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_imageless .GRID_1492146176379_site, .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_imageless .GRID_1492146176379_text {
            position: absolute;
            color: #fff;
            left: 15px;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_imageless .GRID_1492146176379_site {
            top: 20px;
            left: 20px;
            font-size: 11px;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_imageless .GRID_1492146176379_text {
            font-size: 19px;
            top: 38px;
            line-height: 28px;
            padding-right: 22px;
            font-weight: bold;
            letter-spacing: -1px;
        }

        .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_ft {
            display: block;
        }

            .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_ft span {
                position: relative;
                display: block;
                padding: 10px;
                color: #333;
            }

            .GRID_1492146176379_grid .GRID_1492146176379_col .GRID_1492146176379_thumb .GRID_1492146176379_ft .GRID_1492146176379_dimensions {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                padding: 0;
                position: absolute;
                top: -24px;
                height: 24px;
                line-height: 24px;
                left: 0;
                text-align: center;
                width: 100%;
                background: rgba(0,0,0,.2);
                color: #fff;
                font-size: 10px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                opacity: 0;
            }

        @media only screen and (min-width: 768px) {
            .mymodal-dialog
            {
                width:80% !important;
            }

        }


    </style>

    <link href="bootstrap.css" rel="stylesheet" />
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="newTab.js"></script>   
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Stackview</a>
            </div>
            <ul class="nav navbar-nav pull-right">
                <li><a href="#" id="popupclose">X</a></li>
                <!--<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>-->
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h3>Select images to add</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-lg-8 col-md-8 col-sm-12">
                <div id='message' style="height: 500px;overflow-y: scroll;"></div>
            </div>
            <div class="col-xs-12 col-lg-4 col-md-4 col-sm-12">
                <form>
                    <div class="form-group">
                        <label for="Title">Title:</label>
                        <input type="text" placeholder="Title" class="form-control" id="Title" required>
                    </div>
                    <div class="form-group">
                        <label for="Tags">Tags:</label>
                        <input type="text" placeholder="Tags" class="form-control" id="Tags">
                    </div>
                    <div class="form-group">
                        <label for="Price" required>Tags:</label>
                        <input type="text" placeholder="Price" class="form-control" id="Price" required>                        
                    </div>
                    <button type="button" id="btnAdd" class="btn btn-primary">Add</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

newTab.js 

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    switch (request.message) {
        case "loadNewTab":           
            var StackUserID = null;
            console.log(request.data);
            images = request.data.tabHtml.Images;
            title = request.data.tabHtml.Title;
            pagetitle = request.data.tabHtml.PageTitle;
            var style = document.createElement('script');
            style.type = 'text/javascript';
            style.href = chrome.extension.getURL('bootstrap.css');
            (document.head || document.documentElement).appendChild(style);
            var style = document.createElement('link');
            style.rel = 'stylesheet';
            style.type = 'text/css';
            style.href = chrome.extension.getURL('bootstrap.css');
            (document.head || document.documentElement).appendChild(style);
            var text = "";
            if (images.length > 0) {
                //text += "<span class='GRID_1492146176379_hd'><span class='GRID_1492146176379_hdMsg'>Choose a Pin to save</span><span id='popupclose' class='GRID_1492146176379_x'></span></span>";
                text += "<span class='GRID_1492146176379_grid'>";
                //text += "<div class='row'>";

                for (var i = 0; i < images.length; i++) {
                    if (images[i] != null && images[i] != undefined && images[i].toString() != "") {
                        text += "<div class='GRID_1492146176379_col col-md-3 col-lg-3 col-sm-6 col-xs-12'><div class='GRID_1492146176379_thumb'><img class='img img-responsive' alt='" + title[i] + "' src='" + images[i] + "'/></div></div>";
                        //<input type='button' class='GRID_1492146176379_saveButton savebtn' value='Save'/>
                        //text += "<div class='GRID_1492147712179_thumb'><input type='button' class='btn btn-danger savebtn displaynone' value='Save' /><img src='" + images[i] + "' class='img-rounded img-responsive saveimg'/></div>";
                    }
                }
                //text += "</div>";
                text += "</span>";
            }
            //if (images.length > 0) {

            //    text += "<div class='row'>";


            //    for (var i = 0; i < images.length; i++) {
            //        if (images[i] != null && images[i] != undefined && images[i].toString() != "") {
            //            text += "<div class='col-md-3 col-lg-3 col-sm-6 col-xs-12'><img class='img-thumbnail img img-responsive' src='" + images[i] + "'/></div>";
            //            //text += "<div class='GRID_1492147712179_thumb'><input type='button' class='btn btn-danger savebtn displaynone' value='Save' /><img src='" + images[i] + "' class='img-rounded img-responsive saveimg'/></div>";
            //        }
            //    }

            //    text += "</div>";
            //}

            console.log(text);
            var message = document.querySelector('#message');

            message.innerHTML = text;

            var Close = document.getElementById("popupclose");
            var closeFunction = function () {
                chrome.tabs.getCurrent(function (tab) {
                    chrome.tabs.sendMessage(tabs[0].id, { message: "closeModal" }, function (response) {
                        var html = response.html;

                    });
                });

                //chrome.tabs.getCurrent(function (tab) {
                //    chrome.tabs.remove(tab.id, function () { });
                //});
            };
            Close.addEventListener('click', closeFunction, false);

            //document.getElementById('popupclose').addEventListener('click', clickHandler);
            var classname = document.getElementsByClassName("GRID_1492146176379_thumb");
            var myFunction = function () {
                //alert("Clicked")
                //var src = this.previousSibling.src;
                // var alt = this.alt;
                if (pagetitle != null && pagetitle != undefined) {
                    $(this).toggleClass("imageselected");
                    $("#Title").val(pagetitle);
                    // document.getElementById("Title").value = pagetitle;
                }


            };

            for (var i = 0; i < classname.length; i++) {
                classname[i].addEventListener('click', myFunction, false);
            }
            function getCookies(domain, name, callback) {
                chrome.cookies.get({ "url": domain, "name": name }, function (cookie) {
                    if (callback) {
                        callback(cookie.value);
                    }
                });
            }

            //usage:
            getCookies("http://myapp.com", "stakUserid", function (stakUserid) {
                if (stakUserid != null || stakUserid != undefined) {
                    StackUserID = stakUserid;
                    // Loadimages();
                }
                //alert(password);
            });

            var btnadd = document.getElementById("btnAdd");
            var AddFunction = function () {
                if (StackUserID != null && StackUserID != undefined) {
                    var imgsrc = [];
                    $("#message").find('.imageselected').each(function (index) {
                        imgsrc[index] = $(this).find("img").attr("src");

                    });
                    var title = $("#Title").val().trim();
                    var tag = $("#Tags").val().trim();
                    var itemtags = [];
                    if (tag.includes(",")) {
                        itemtags = tag.split(",");
                    }
                    else {
                        itemtags = tag;
                    }
                    var price = $("#Price").val().trim();
                    if (imgsrc.length > 0) {
                        //var res = title + " " + tag + " " + price + " " + imgsrc.length
                        var postdata = {
                            "userid": StackUserID,
                            "images": imgsrc,
                            "title": title,
                            "price": price,
                            "tags": itemtags
                        }
                        console.log(JSON.stringify(postdata));
                        $.ajax({
                            type: "POST",
                            url: "http://myapp.com/likedImages",
                            // The key needs to match your method's input parameter (case-sensitive).
                            data: JSON.stringify(postdata),
                            contentType: "application/json;charset=utf-8",
                            dataType: "json",
                            success: function (data) {

                                alert(data.message);
                            },
                            failure: function (errMsg) {
                                alert(errMsg);
                            }
                        });                            
                    }
                } else {

                }
            };
            btnadd.addEventListener('click', AddFunction, false);
            break;
    }
});
//function clickHandler(e) {
//    chrome.runtime.sendMessage({ directive: "popup-click" }, function (response) {
//        this.close(); // close the popup when the background finishes processing request
//    });
//}

将newTab.html加载到iframe时，newTab.js文件中未调用此代码的代码将在打开页面时作为Newtab工作。

0 个答案:

没有答案
相关问题
最新问题