chrome 扩展：创建新选项卡并将焦点移至页面

Question

尝试做一个扩展，创建新标签并将其导航到某个网站并给予一些 <input> 关注。

我检查了这个问题，但无法解决我的问题： How to steal focus from the omnibox in a Chrome extension on the new tab page?

这是一个示例代码，我试图打开一个导航到 google 的新选项卡并尝试关注 google 搜索栏。

这是我的 content_script.js 尝试捕获指定网页上的点击并指定 <div> 并向我的 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();        
});

并且还包含一个 JQuery 库。

我正在尝试用 JQuery 注入 javascript 但它发送了消息。一切正常，但无法将焦点从地址栏转移到网页。

第二件事，如果我在尝试加载页面时单击新创建的页面，focus() 工作得很好。

我尝试搜索 google 资源，但找不到任何解决方案，也不知道是否有办法将焦点转移到页面。

Answer 1

我想出了我的解决方案。想法很简单，当你尝试创建一个新的 tab 时，默认情况下 selected 属性是 true。当您创建新的 tab 时，它会显示出来并且它的地址栏会自动聚焦。那么你就不能把焦点从 bar 转移到 page.

为了防止聚焦地址栏，您创建了具有属性 selected:false 的新 tab。

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

创建选项卡后，您可以更新其 link 和 selected 属性，然后您可以通过注入 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});

}

比起你的 focus() 函数来说没有问题。

chrome 扩展：创建新选项卡并将焦点移至页面

chrome extension: creating new tab and taking focus to page

javascript

focus

google-chrome-extension