javascript - एक्सटेंशन पॉपअप विंडो सामग्री को बचाने के तरीके पर पूरी तरह से खो दिया है




html google-chrome (2)

मैं अपने पॉपअप विंडो की जोड़ी गई सामग्री को हर बार गायब नहीं करता कि मैं एक नया लिंक खोलने या इसे "दूर" पर क्लिक करने के लिए बहुत अधिक खो गया हूं। मैंने कंटेंट स्क्रिप्ट, बैकग्राउंड स्क्रिप्ट और इसी तरह के बारे में पढ़ा है, लेकिन मैं ईमानदारी से नहीं जानता कि इसे अपने सोर्स कोड में कैसे लागू किया जाए। नीचे मेरा popup.html , popup.js और मेरी मैनिफ़ेस्ट . js फ़ाइल है।

{
    "manifest_version": 2,
    "name": "URL_save",
    "description": "This extension saves an URL and renames the title to the user's wishes and hyperlink the title.",
    "version": "0.1",

    "browser_action": {
        "default_icon": "/img/icon.png",
        "default_popup": "popup.html",
        "default_title": "See your saved websites!"
    },

    "permissions": [
        "tabs"
    ]
}

पॉपअप html :

<html>
  <head>
    <title>Your articles</title>
    <link href="/css/style.css" rel="stylesheet"/>
    <script src="/js/underscore-min.js"></script>
    <script src="/js/popup.js"></script>
  </head>
  <body>
    <div id="div">No content yet! Click the button to add the link of the current website!</div>
    <div><ul id="list"></ul></div>
    <br/>
    <button id="button">Add link!</button>
  </body>
</html>

popup.js :

// global variables
var url;

// event listener for the button inside popup window
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('button');
    button.addEventListener('click', function() {
        addLink();
    });
});

// fetch the URL of the current tab, add inside the window
function addLink() {
// store info in the the queryInfo object as per: 
//   https://developer.chrome.com/extensions/tabs#method-query
    var queryInfo = {
    currentWindow: true,
    active: true
    };

    chrome.tabs.query(queryInfo, function(tabs) {
        // tabs is an array so fetch the first (and only) object-elemnt in tab
        // put URL propery of tab in another variable as per: 
        //   https://developer.chrome.com/extensions/tabs#type-Tab
        url = tabs[0].url;

        // format html
        var html = '<li><a href=' + url + " target='_blank'>" + url + '</a><br/></li>';

        // change the text message
        document.getElementById("div").innerHTML = "<h2>Saved pages</h2>";

        // get to unordered list and create space for new list item 
        var list = document.getElementById("list");
        var newcontent = document.createElement('LI');
        newcontent.innerHTML = html;

        // while loop to remember previous content and append the new ones
        while (newcontent.firstChild) {
            list.appendChild(newcontent.firstChild);
        }
    });
}

इस छवियों में आप देखते हैं कि क्या होता है जब मैं पहली बार एक लिंक जोड़ता हूं, लेकिन फिर पॉपअप विंडो को बंद कर देता हूं, इसे फिर से खोलता हूं:

वर्तमान URL जोड़ने के बाद:

पॉपअप को बंद करने और फिर से खोलने के बाद:


एक पॉपअप पुनः लोड होता है यह हर बार बंद / फिर से खोलने पर दस्तावेज़ होता है। इसके बजाय, आपको राज्य को संरक्षित करने के लिए पृष्ठभूमि पृष्ठ का उपयोग करना चाहिए।

ऐसा करने का सामान्य तरीका है:

  1. पॉपअप से बैकग्राउंड में कुछ करने के लिए संवाद करें। Ie: एक ajax अनुरोध करते हैं और परिणाम को एक सादे जावास्क्रिप्ट ऑब्जेक्ट में संग्रहीत करते हैं।
  2. जावास्क्रिप्ट ऑब्जेक्ट प्राप्त करने के लिए, पृष्ठभूमि पृष्ठ से प्राप्त करें। हालांकि आप पॉपअप को बंद कर देते हैं, लेकिन राज्य पृष्ठभूमि पृष्ठ में संरक्षित है।

एक वेब पेज के समान, पॉपअप (या एक विकल्प / सेटिंग्स पेज) का स्कोप तब बनाया जाता है जब इसे दिखाया और नष्ट किया जाता है जब यह दिखाई नहीं देता है। इसका मतलब है कि पॉपअप के भीतर उस समय के बीच कोई राज्य संग्रहीत नहीं है जो इसे दिखाया गया है। कोई भी जानकारी जिसे आप पॉपअप के नष्ट होने के बाद जारी रखना चाहते हैं, आपको कहीं और स्टोर करना होगा। इस प्रकार, आपको किसी भी राज्य को संग्रहीत करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी जो आप चाहते हैं कि अगली बार पॉपअप खुलने के बाद वही हो। जितनी बार पॉपअप खोला जाता है, आपको उस जानकारी को पुनः प्राप्त करना होगा और इसे DOM पर पुनर्स्थापित करना होगा। दो सबसे अधिक इस्तेमाल किए जाने वाले स्थान एक StorageArea MDN , या पृष्ठभूमि पृष्ठ हैं।

जहां आप जानकारी संग्रहीत करते हैं, यह इस बात पर निर्भर करेगा कि आप कितने समय तक डेटा संग्रहीत करना चाहते हैं और आप डेटा कहां देखना चाहते हैं।

सामान्य स्थान जहां आप डेटा स्टोर कर सकते हैं, (अन्य संभावनाएं मौजूद हैं, लेकिन अनुवर्ती सबसे आम हैं):

  • यदि आप चाहते हैं कि पृष्ठभूमि पृष्ठ केवल क्रोम बंद होने तक ही मौजूद रहे। Chrome के पुनरारंभ होने के बाद यह मौजूद नहीं होगा। आप डेटा को बैकग्राउंड पेज पर कुछ / कुछ अलग तरीकों से भेज सकते हैं, जिसमें MDN पास करना संदेश , या बैकग्राउंड MDN पर सीधे मूल्यों को बदलना शामिल है । StorageArea में संग्रहीत डेटा (नीचे दो विकल्प) पृष्ठभूमि पृष्ठ और सामग्री स्क्रिप्ट के लिए भी उपलब्ध है।
  • StorageArea MDN यदि आप चाहते हैं कि डेटा क्रोम पर स्थानीय मशीन पर बना रहे और बंद हो जाए।
  • StorageArea MDN यदि आप क्रोम के सभी उदाहरणों के साथ साझा किया गया डेटा चाहते हैं, जो वर्तमान Chrome खाते / प्रोफ़ाइल का उपयोग करते हैं। डेटा भी परिवर्तित होने तक बना रहेगा। यह क्रोम बंद होने और फिर से चालू होने के माध्यम से उपलब्ध होगा। यह उसी प्रोफाइल का उपयोग करके अन्य मशीनों पर उपलब्ध होगा।
  • window.localStorage : window.localStorage के अस्तित्व से पहले यह window.localStorage में विस्तार के लिए डेटा संग्रहीत करने के लिए लोकप्रिय था। हालांकि यह अभी भी काम करेगा, यह आमतौर पर chrome.storage का उपयोग करना पसंद करता है।

chrome.storage StorageArea MDN का उपयोग करने के लाभों में से एक यह है कि डेटा सीधे आपके एक्सटेंशन के सभी भागों में एक संदेश के रूप में डेटा को पारित करने की आवश्यकता के बिना उपलब्ध है। 1

आपका वर्तमान कोड

वर्तमान में आपका कोड उन URL को संग्रहीत नहीं कर रहा है जो पॉपअप के DOM के अलावा कहीं और दर्ज किए गए हैं। आपको एक डेटा संरचना (जैसे एक सरणी) स्थापित करने की आवश्यकता होगी जिसमें आप URL की सूची संग्रहीत करते हैं। यह डेटा फिर ऊपर उल्लिखित भंडारण स्थानों में से एक में संग्रहीत किया जा सकता है।

विकल्प दस्तावेज़ीकरण पृष्ठ 2 पर Google का उदाहरण , MDN विकल्प पृष्ठ प्रदर्शित होने पर chrome.storage.sync और DOM में मान पुनर्स्थापित करना दिखाता है। विकल्प पृष्ठ के लिए इस उदाहरण में उपयोग किया गया कोड ठीक उसी तरह काम कर सकता है जैसे कि किसी पॉपअप के लिए अपने HTML पृष्ठ को browser_action लिए default_popup रूप में परिभाषित browser_action । कई अन्य उदाहरण उपलब्ध हैं।

दुर्भाग्य से, आप जो चाहते हैं, उससे अधिक विवरण के बिना, आपको विशिष्ट कोड देना मुश्किल है। हालाँकि, सुझाव की दिशा में सिर के कुछ जोड़े आप जाने की जरूरत है:

  • अपने कोड को रिफलेक्टर करें ताकि आपके पास एक अलग फ़ंक्शन हो जिसे आप एक URL के साथ एक पैरामीटर के रूप में कॉल करते हैं जो इस URL को उस सूची में जोड़ता है जो आपके पास DOM (जैसे addUrlToDom(url) ) में है। इस फ़ंक्शन का उपयोग तब किया जाएगा जब उपयोगकर्ता URL जोड़ता है और जब पृष्ठ लोड होने पर URL को पुनर्स्थापित किया जाता है।
  • URL की अपनी सूची को किसी सरणी में urlList (जैसे urlList )। यह सरणी वह होगी जो आप अपने पॉपअप के बाहर संग्रहण स्थान में सहेजते हैं। आप अपने DOMContentLoaded हैंडलर में उस संग्रहण स्थान से इस सरणी को DOMContentLoaded और प्रत्येक मूल्य को जोड़ने के लिए refactored addUrlToDom() फ़ंक्शन का उपयोग करेंगे। इसे DOM में पुनर्स्थापित करने से कुछ ऐसा दिखाई दे सकता है:

    urlList.forEach(function(url){
        addUrlToDom(url);
    });

अपना डेटा chrome.storage.local में संग्रहीत करना

मान लें कि आप Chrome शटडाउन / पुनरारंभ (यानी chrome.storage.local उपयोग करें) पर स्थानीय मशीन पर URL स्टोर करना चाहते हैं, तो आप कुछ ऐसा देख सकते हैं:

मैनिफ़ेस्ट.जॉन केवल permissions बदलता है:

    "permissions": [
        "tabs",
        "storage"
    ]

popup.js :

// global variables
var urlList=[];

document.addEventListener('DOMContentLoaded', function() {
    getUrlListAndRestoreInDom();
    // event listener for the button inside popup window
    document.getElementById('button').addEventListener('click', addLink);
});

// fetch the URL of the current tab, add inside the window
function addLink() {
    chrome.tabs.query({currentWindow: true,active: true}, function(tabs) {
        // tabs is an array so fetch the first (and only) object-element in tab
        var url = tabs[0].url;
        if(urlList.indexOf(url) === -1){
            //Don't add duplicates
            addUrlToListAndSave(url);
            addUrlToDom(url);
        }
    });
}

function getUrlListAndRestoreInDom(){
    chrome.storage.local.get({urlList:[]},function(data){
        urlList = data.urlList;
        urlList.forEach(function(url){
            addUrlToDom(url);
        });
    });
}

function addUrlToDom(url){
    // change the text message
    document.getElementById("div").innerHTML = "<h2>Saved pages</h2>";

    //Inserting HTML text here is a bad idea, as it has potential security holes when
    //  including content not sourced entirely from within your extension (e.g. url).
    //  Inserting HTML text is fine if it is _entirely_ sourced from within your
    //  extension.
    /*
    // format HTML
    var html = '<li><a href=' + url + " target='_blank'>" + url + '</a></li>';
    //Add URL to DOM
    document.getElementById("list").insertAdjacentHTML('beforeend',html);
    */
    //Build the new DOM elements programatically instead:
    var newLine = document.createElement('li');
    var newLink = document.createElement('a');
    newLink.textContent = url;
    newLink.setAttribute('href',url);
    newLink.setAttribute('target','_blank');
    newLine.appendChild(newLink);
    document.getElementById("list").appendChild(newLine);
}

function addUrlToListAndSave(url){
    if(urlList.indexOf(url) === -1){
        //URL is not already in list
        urlList.push(url);
        saveUrlList();
    }
}

function saveUrlList(callback){
    chrome.storage.local.set({urlList},function(){
        if(typeof callback === 'function'){
            //If there was no callback provided, don't try to call it.
            callback();
        }
    });
}
  1. इसका अपवाद वह स्क्रिप्ट है जिसे आप पृष्ठ संदर्भ में सम्मिलित करते हैं। पृष्ठ का संदर्भ कुछ ऐसा है जिसे आप संभवतः स्क्रिप्ट नहीं चला रहे हैं। ऐसा करने के लिए आपको एक वेब पेज के DOM में <script> टैग डालने के लिए एक सामग्री स्क्रिप्ट (जहाँ आपका StorageArea MDN डेटा सीधे उपलब्ध है) का उपयोग करना होगा। यह थोड़ा जटिल हो सकता है, किसी को भी आपको इसके बारे में चिंतित होने की आवश्यकता नहीं है। इसका उल्लेख यहां केवल इसलिए किया गया है कि StorageArea MDN डेटा आपके एक्सटेंशन के सभी क्षेत्रों के लिए उपलब्ध है।
  2. क्रोम डॉक्यूमेंटेशन में उदाहरण फ़ायरफ़ॉक्स पर ठीक काम करता है। हां, फ़ायरफ़ॉक्स दोनों chrome.* का समर्थन करता है chrome.* , कॉलबैक और browser.* का उपयोग कर browser.* वादों का उपयोग करते हुए




firefox-webextensions