chrome extension: creating new tab and taking focus to page

问题

trying to make an extension that creating new tab and navigating it to some site and giving some <input> to focus.

I check this question but cant solve my problem: How to steal focus from the omnibox in a Chrome extension on the new tab page?

here is a sample code that I am trying to open a new tab navigating to google and trying to focus on the google search bar.

this is my content_script.js try to catch a click on specified web page and specified <div> and send a message to my background.js

manifest.json

{
    "manifest_version": 2,
    "name": "E-Yaygın Kursiyer Aktarımı",  
    "description": "E-Yaygın Kursiyer Aktarımını Kolaylaştıran Yazılım",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>"],  
    "background": {
    "scripts": ["background.js"]
  },
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["jquery.js","content_script.js"]
    }],

    "icons": {
        "16": "images/icons/16.png",
        "19": "images/icons/19.png",
        "38": "images/icons/38.png",
        "64": "images/icons/64.png",
        "128": "images/icons/128.png"
    }
}

content_script.js

$("#kybs_eklenti_edin_btn").hide();
$(document).ready(function (e) {
var host = $(location).attr('hostname');
var url = $(location).attr('pathname');
var search = $(location).attr('search');
console.log(url,"|",host,"|",search);
if (host.indexOf("kybs.com.tr")!=-1){
    if (url == "/yoneticiv2/kursiyerlistesi"){
        $("#tn_logo_holder").click(function(){
            chrome.runtime.sendMessage({mesaj: "init_program"}, function(response) {
            console.log(response);
            });             
        }); 
    }
}
});

background.js

var openedTab = 0;
var isTabOpen = false;
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.mesaj == "init_program"){
        if (!isTabOpen){
            chrome.tabs.create({selected: true},function(tab){
            isTabOpen= true;
            openedTab = tab.id;
            tabCreated();
            });         
        }else {
            chrome.tabs.get(openedTab, function(tab) { 
                if (chrome.runtime.lastError) {
                    chrome.tabs.create({selected: true},function(tab){
                        isTabOpen= true;
                        openedTab = tab.id;
                        tabCreated();
                    });         
                }else {
                    tabCreated();
                }
            });

        }       
        sendResponse("check");
    }

});
function tabCreated(){
    chrome.tabs.update(openedTab,{url:"https://google.com.tr"});

    chrome.tabs.executeScript(openedTab, {file: "jquery.js"},function(tab){
            if (chrome.runtime.lastError) {
                console.log(chrome.runtime.lastError.message);
                chrome.tabs.executeScript(openedTab, {file: "jquery.js"},function(tab){
                chrome.tabs.executeScript(openedTab, {file: "inject.js"});
                });
            }else {
                chrome.tabs.executeScript(openedTab, {file: "inject.js"});
            }
        });

}

inject.js

$(document).ready(function(){
    console.log("buradayız");
    var kursNoInput = document.getElementById("lst-ib");
    kursNoInput.value="840337";
    kursNoInput.focus();        
});

and also include a JQuery library.

I am trying to inject javascript with JQuery but it dosent metter. everything works fine but cant take focus from the adress bar to the web page.

second thing if I click on the page that newly created while page trying to load focus() works really fine.

I try to search on google resources but cant find any solution and dont know is there a way to taking the focus to the page.

回答1:

I came up with my solution. idea is simple, when you try to create a new tab, by default selected attribute is true. and when yout create new tab it came up to display and its address bar automaticly focused. then you cant steal the focus from bar to page.

To preventing to focusing address bar you creating new tab with attribute selected:false like this.

chrome.tabs.create({selected: false},function(tab){
                        isTabOpen= true;
                        openedTab = tab.id;
                        tabCreated();
                    });   

after creating tab than you can update its link and selected attribute and then you can take focus from address bar with injected javascript.

function tabCreated(){
    chrome.tabs.update(openedTab,{url:"https://google.com.tr"});
    chrome.tabs.executeScript(openedTab, {file: "jquery.js"},function(tab){
            if (chrome.runtime.lastError) {
                console.log(chrome.runtime.lastError.message);
                chrome.tabs.executeScript(openedTab, {file: "jquery.js"},function(tab){
                chrome.tabs.executeScript(openedTab, {file: "inject.js"});
                });
            }else {
                chrome.tabs.executeScript(openedTab, {file: "inject.js"});
            }
        });
chrome.tabs.update(openedTab,{selected:true});

}

than your focus() functions work with no problem.

来源：https://stackoverflow.com/questions/42178723/chrome-extension-creating-new-tab-and-taking-focus-to-page