Хранить расширение Chrome на странице reload

Question

Я пытаюсь создать простое расширение chrome, которое вставляет/скрывает div, когда действие браузера (значок расширения) переключается. У меня есть основы работы, но я хотел бы, чтобы расширение оставалось в нем «on-state» (вставляемый div), когда страница перезагружается. Его следует удалять только при переключении.

В настоящее время при каждой перезагрузке все сбрасывается.

Вот что я до сих пор:

manifest.json

{ 
    "name": "My Extension", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"], 
     "persistent": false 
    }, 
    "browser_action": { 
     "default_icon": "icon-off.png" 
    }, 
    "permissions": [ 
     "tabs" 
    ] 
} 

background.js

toggle = false; 

chrome.browserAction.onClicked.addListener(function(tab) { 

    toggle = !toggle; 

    var status = 'off'; 

    if(toggle) { 
     status = 'on'; 
    } 

    // Toggle the icon 
    chrome.browserAction.setIcon({path: 'icon-'+status+'.png', tabId:tab.id}); 

    // Execute script & pass a variable 
    chrome.tabs.executeScript(tab.id, { 
     code: 'var extension_status = "'+status+'";' 
    }, function() { 
     chrome.tabs.executeScript(tab.id, {file: 'inject.js'}); 
    }); 

}); 

inject.js

// ID for inserted element 
var my_div_id = 'foo'; 

// The div (returns null if doesn't exist) 
var my_div = document.getElementById(my_div_id); 

// If on for first time 
if(extension_status == 'on' && !my_div) { 

    // Create div 
    var div = document.createElement('div'); 
    div.id = my_div_id; 
    div.textContent = 'hello'; 

    // Insert into page 
    document.body.appendChild(div); 

} 
// When toggled off hide 
else if(extension_status == 'off') { 
    my_div.style.display = 'none'; 
} 
// When Toggled back on again show again 
else { 
    my_div.style.display = 'block'; 
} 

Должен ли я передать значение обратно в файл background.js? или есть лучший способ справиться с этим?

Answer 1

В конце концов я выяснил, что мне нужно было добавить слушателя для chrome.tabs.onUpdated, поскольку также был отмечен отличный ответ ViewSource. Вот окончательный рабочий пример:

manifest.json

{ 
    "name": "My Extension", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "background": { 
     "scripts": ["background.js"], 
     "persistent": false 
    }, 
    "browser_action": { 
     "default_icon": "icons/icon-off.png" 
    } 
    "permissions": [ 
     "activeTab", 
     "<all_urls>" 
    ] 
} 

background.js

var toggle = false; 
var status = 'off'; 
var the_tab_id = ''; 

function set_status() { 
    toggle = !toggle; 
    status = 'off'; 
    if(toggle) { status = 'on'; } 
} 

function toggle_extension(tab){ 
    // Set icon 
    chrome.browserAction.setIcon({ path: 'icons/icon-'+status+'.png', tabId:tab.id }); 
    // Pass variable & execute script 
    chrome.tabs.executeScript({ code: 'var extension_status = "'+status+'"' }); 
    chrome.tabs.executeScript({ file: 'inject.js' }); 
    // Set the tab id 
    the_tab_id = tab.id; 
} 

function my_listener(tabId, changeInfo, tab) { 
    // If updated tab matches this one 
    if (changeInfo.status == "complete" && tabId == the_tab_id && status == 'on') { 
     toggle_extension(tab); 
    } 
} 

chrome.browserAction.onClicked.addListener(function(tab) { 
    set_status(); 
    toggle_extension(tab); 
}); 

chrome.tabs.onUpdated.addListener(my_listener); 

inject.js

if(extension_status == 'on') { 
    // do stuff 
} 

Answer 2

У меня был тот же самый промах.

После перезагрузки страницы вам необходимо снова включить расширение, как это было при нажатии пользователем кнопки браузера, без значения - toggle = !toggle;, так как пользователь не изменил состояние расширения.

Итак, как вы узнаете, когда перезагрузка табуляции? используя tabs.onUpdated

Вашей нового фона страницу должно выглядеть следующим образом:

var toggle = false; 
var status = 'off'; 

chrome.browserAction.onClicked.addListener(function(tab) { 
    set_status(); 
    toggle_extansion() 
}); 

//add listener 
chrome.tabs.onUpdated.addListener(your_listener); 

function your_listener(tabId, changeInfo, tab) { 
    //Check that the extension should work on the updated tab 
    if (tab.url.search("://www.thesite.com") >-1){ 
    //toggle the extansion as you already did 
    toggle_extansion(); 
    } 
} 

function toggle_extansion(){ 
    // Toggle the icon 
    chrome.browserAction.setIcon({path: 'icon-'+status+'.png', tabId:tab.id}); 

    // Execute script & pass a variable 
    chrome.tabs.executeScript(tab.id, { 
     code: 'var extension_status = "'+status+'";' 
    }, function() { 
     chrome.tabs.executeScript(tab.id, {file: 'inject.js'}); 
    }); 
} 

function set_status(){ 
    toggle = !toggle; 

    if(toggle) { 
     status = 'on'; 
    } 
} 

Примечания: Там нет простого способа слушать только вкладки containig сайтов спичек в манифесте расширения.