How does the Pinterest extension store (temporarily) images from a web page and then access them in an iframe?

Question

I am trying to create a Pin It button (Pinterest extension), for example, a chrome extension. What I tried is running the script when I click on an extension that can iterate through all available images on a web page, save it in LocalStorage . Now I need to call an iframe (another domain) and access these images . Since you can only access localstorage from the same domain, I'm pretty confused since Pinterest manages to store all the images from a web page (temporarily, and not on its server) and then use it in an iframe.



I also saw the PinIt Button extension code, but I can not understand any of it, because it is too confused / encrypted or something else.

I read about chrome.storageapi and I could not understand it well enough. I'm not even sure that this is what I need to do in this case. (This is the first time I am developing a chrome extension). Can someone shed some light on this and give me the best way to achieve this functionality?

PS I completed this extension without using it <iframe>, but I need to do it with <iframe>.

EDIT 1: I cannot write the full code here, but here is the thread / structure / my attempts
I start withbackground.js

chrome.browserAction.onClicked.addListener(function (tab) { /*This fxn fires when extension is clicked*/
    chrome.tabs.executeScript(tab.id, {
        "file": "bookmarklet.js"/*Calls this file*/
    })
});

In bookmarklet.js:

jQuery('body').append('<iframe class="vw_parent" id="image-grabber-container" src="" style="height: 100% !important;    width: 100% !important; position: fixed !important; margin: 0% auto !important; background: rgba(17, 17, 17, 0.9) !important; left: 0 !important; right: 0 !important; z-index: 999999999 !important; top: 0% !important;"></iframe>');

jQuery('img').each(function() {
   //do some checks to determine what images need to be stored
   var allImgs = jQuery(this); 
   localStorage.setItem('myLocalImgs', allImgs);
})
vwgrid = "https://mydomain/FileToBeInjectedInIframe.php";
jQuery('#image-grabber-container').attr('src', vwgrid);

Now in FileToBeInjectedInIframe.php

var abcde = localStorage.getItem('myLocalImgs');
console.log(abcde);
//This gives NULL value

2: DelightedD0D, /
1. -
2. , -, iFrame
3. iFrame,
4. iFrame: POST IMAGE, iFrame, , iFrame
5. iFrame, , -, /cookie .

( , ), pinterest iFrame

Answer 1

TL; DR, ;)

, , , , .

-, iFrame. , .

:

• script, (, , - )
• script javascript, chrome.runtime.onMessage.addListener
• , {pageAction:"getImages"} getImages
• getImages

, base64, , URL- CORR, .. getImages ajax- encodeImagesToBase64.php , URL- . encodeImagesToBase64.php base64, .

• , base64, Id chrome.storage.local .
• , -
• , javascript, ,

---

, javascript, .

( , John Resig JavaScript, )

// IMPORTANT NOTE you must reload your extension via chrome://extensions 
// AND reload the browser tab in order for changes to this file to be seen!!

var PageActionListener = Class.extend({
    /**
     * This class is meant to be injected into a webpage
     * once there, it listens for messages from an extension
     * messages must pass like {pageAction:"someAction", ... } 
     * where someAction should map to a function in this class
     * responses should take the form 
     * {success:true, pageAction:"someAction", data:"someData", ... }
     */
    attachListener: function() {
        /**
         * Attaches a chrome message listener to the current page
         * this allows the extension to call 
         * the functions in this class from the context of the page
         * and receive responses from those functions via messaging
         */
        var _this=this;
        // Listen for messages from the popup
        chrome.runtime.onMessage.addListener(function (msg, sender, extensionCallback) {
            // First, validate the message links to a function
            if (msg.pageAction) {
                // then make sure its a legit function in this class
                if(typeof _this[msg.pageAction] === "function"){
                    // call that fucntion
                    _this[msg.pageAction](msg,function(response){

                        extensionCallback(response);
                    });
                }
                else extensionCallback({success:false,msg:msg,error:"Action not found"});
                return true;
            }
        });
    },
    getImages:function(msg,callback){
        /**
         * Traverses the DOM looking for images and returning them
         * as an array of base64 strings
         * @param object msg The message that triggered this action
         * @param function callback A function to be called when the action below is complete
         * passes to callback the images gathered from the page
         */
        var images = [];
        var $images= $('img');
        $images.each(function(){
            var url = this.src;
            images.push(url);

        });
        // convert images to base64
        $.ajax({
            type: "POST",
            url: "https://somedomain.com/shared-resources/php/encodeImagesToBase64.php", // you'll need to update this to your path
            data: {urls:images},
            success: function(response) {
                response.msg=msg;
                send the response back to the extension
                callback(response);
            },
            error: function(xhr, status, error) {
                callback({success:false,msg:msg,error:error.Message})
            }
        });
    },
    // add other functions that need to be called by the extension here
});

encodeImagesToBase64.php base64:

<?php
if (isset($_POST['urls']) ){
    $imageStrings=[];
    foreach($_POST['urls'] as $url){
        $imageStrings[]=base64_encode(file_get_contents($url));
    }
    echo json_encode(['success'=>true,'images'=>$imageStrings]);
}else{
    echo json_encode(['success'=>false,'error'=>'Error: No images to encode']);;
}

, kindof , .

, , .

encodeImagesToBase64.php, , ajax . , , , :)