如何在Chrome擴展開發中將值傳遞給頁面？

Question

我有一個彈出式窗口，稱之爲「welcome.html」，我想我們該做的是，當用戶選擇一個文本，然後單擊我的插件，它會使用一些頁面信息，並打印回歡迎。 HTML。例如，網站標題以及用戶選擇的文本和網址。但是，我怎樣才能將價值傳遞給welcome.html？謝謝。

Answer 1

我my extension做了很多的這個，因爲它煤礦大量數據能夠很容易地將其複製到剪貼板的用戶。

既然你正在尋找少了很多數據，它甚至更簡單。當您的彈出窗口被加載時，您可以調用以下函數來檢索您需要的信息;

function getData(callback) { 
    chrome.tabs.getSelected(null, function (tab) { 
     var data = { 
      selection: '', 
      title: tab.title, 
      url: tab.url 
     }; 
     /* 
     * We can't call content scripts on some pages and the process will get 
     * stuck if we try. 
     */ 
     if (tab.url.indexOf('chrome') === 0 || 
       tab.url.indexOf('https://chrome.google.com/webstore') === 0) { 
      callback(data); 
     } else { 
      chrome.tabs.sendRequest(tab.id, {}, function (response) { 
       data.selection = response.selection; 
       callback(data); 
      }); 
     } 
    }); 
} 

確保您傳入一個回調函數，一旦所有數據被提取，將會調用該函數;

getData(function (data) { 
    console.log('Title: ' + data.title); 
    console.log('URL: ' + data.url); 
    console.log('Selected Text: ' + data.selection); 
    // Display the data instead 
}); 

正如您可能已經注意到getData函數發送請求到選定的選項卡。一個content script將需要的頁面將被注入爲了這個工作，所以要確保你已經調用getData之前正確或injected it programmatically配置您的清單，否則將無法正常工作。需要注入的腳本應該類似於以下內容;

(function() { 
    chrome.extension.onRequest.addListener(function (request, sender, 
      sendResponse) { 
     sendResponse({ 
      selection: window.getSelection().toString() 
     }); 
    }); 
})(); 

這只是返回當前選定的文本。一個值得關注的是，這個數據查找可能導致輕微的停頓，而彈出窗口渲染，但你應該測試這個自己和自己做個實驗，但也有solutions。

這應該涵蓋所有你需要知道的這麼好運氣，讓我知道如果你需要任何進一步的幫助我所知，如果你是新來的Chrome擴展程序，這可能會稍微壓倒。