Chrome扩展程序可检测当前标签页的语言环境

Question

I want to show the locale(lang attribute of html source code) of the tab selected and display it in my popup.html of Chrome-Extension. For doing this. My popup.html is:

<div id="pageLocale">Page Locale is: <b>  <script src="write.js"></script></b></div>

My write.js is:

chrome.tabs.executeScript(null,{code:"document.write(document.documentElement.lang)"});

If I use this, I get the content of my selected tab all blank and only the locale string. I understand what is the issue here. I want to know, how I can extract lang attribute using "document.documentElement.lang" for the current tab and return it to my popup.html. The current tab selected should not go blank when I click chrome-extension icon. Please help guys.

Answer 1

By calling document.write in chrome.tabs.executeScript , you're overwriting the content of the document (as you've observed). Often, you should not use document.write .

And don't use document.documentElement.lang , because it can be empty if not set by the page. Instead, use chrome.tabs.detectLanguage . Here's an example:

// write.js
(function() {
    var thisScriptElement = document.currentScript;
    chrome.tabs.detectLanguage(null, function(language) {
        var node = document.createTextNode(language);
        // Replace <script> with the text
        thisScriptElement.parentNode.replaceChild(node, thisScriptElement);
    });
})();

If you really want to get the value of the lang attribute (even if it is an empty string), then you need to use chrome.tabs.executeScript as follows:

// write.js
(function() {
    var thisScriptElement = document.currentScript;
    chrome.tabs.executeScript(null, {
        code: 'document.documentElement.lang;'
    }, function(result) {
        var language = result[0]; // Last expression's result in the top frame.
        var node = document.createTextNode(language);
        // Replace <script> with the text
        thisScriptElement.parentNode.replaceChild(node, thisScriptElement);
    });
})();