Javascript 即使用户导航到另一个页面，如何将内容脚本插入到选项卡中？

我正在开发一个Chrome扩展，其中有popup.js、background.js和myscript.js（内容脚本）。每当我点击扩展图标时，它就会通过browserAction启动一个新的panel类型的窗口。然后，当我单击面板窗口中的“录制”按钮时，popup.js会将一条消息传递给background.js：

popup.js:

$（“#rcrd_btnr”）。单击（功能（ee）
{
警报（“即将开始重新编码”）；
//将消息从popup.js发送到background.js
chrome.runtime.sendMessage（{from:'record'}）；
“rcrd_btn_blue”是一个按钮，用于停止记录页面上的事件//
$（“#rcrd_btn_red”）.hide（）；
$（“#rcrd_btn_blue”）.show（）；
});

此外，background.js将消息传递给myscript.js（内容脚本）

background.js:

if（request.from=='record'）
{
chrome.browserAction.setBadgeBackgroundColor（{tabId:actvTabId，color:“green”}）；
chrome.browserAction.setBadgeText（{tabId:actvTabId，text:'R'}）；
chrome.tabs.query（{active:true}，函数（tabs）
{
对于（var i=0；i我已经解决了这个问题。我所做的是，我有一个监听器来检查我的myscript.js和chrome.onUpdatedAPI中的background.js中单击的对象是否是超链接。每当用户单击超链接时，就会将消息发送到chrome.onUpdatedAPI中的background.js其中我使用了setTimeout，它再次注入了myscript.js
内容脚本就像页面的附加脚本（即使它在单独的环境中运行）因此，当导航到另一个页面时，页面本身被破坏时，它无法存活。您必须使用例如chrome.tabs.onUpdated在后台页面脚本中跟踪url导航。我相信StackOverflow上有很多这样的例子，祝您好运找到它们。或者可能有人会在此处发布定制的答案。好的谢谢…将给它一个机会…并让您知道..请回答主题中的问题：包括一个完整的复制问题。通常，包括manifest.json、一些背景和内容脚本。寻求调试帮助的问题（“此代码为什么不工作？”）必须包括：►想要的行为，►特定的问题或错误，以及►在问题本身中复制内容所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建”，和。具体而言：您不显示内容脚本如何或为什么注入页面。您要求我们向您展示如何“保持内容脚本注入”。即使这样做是不可能的（请参阅wOxxOm的评论），但我们如何提出建议，以便从功能的角度来看，当您没有在内容脚本中首先显示内容脚本是如何注入的时，您能够接近它，为什么您有
var ele=document.getElementsByTagName（event.target.nodeName）；
？您的评论说它是为了获取被单击的元素。但是，您已经将该元素作为
event.target
。使用
event.target.nodeName
来获取要从中查找
event.target
的节点列表是没有意义的。即使这样做有意义，您也永远不会使用
ele
变量，因此它不需要存在。
var rcrd_btn_cntr=0;
      $(document).ready(function()    {

            //listen mssage from record_button_red
            $("#rcrd_btnr").click(function(ee)
            {
                //alert('about to start recoding');

                //send message from record_to_background
                chrome.runtime.sendMessage({from : 'record'});
                // console.log(ws);
                $("#rcrd_btnr").hide();
                $("#rcrd_btnb").show();
            });

            //listen mssage from record_button_blue
            $("#rcrd_btnb").click(function(ee)
            {
                alert('about to stop recoding');
                $("#rcrd_btnb").hide();
                $("#rcrd_btnr").show();
                //send messagee from record_Button_stop
                chrome.runtime.sendMessage({from : 'cancel'});
            });


    //Listens for message coming from background
            chrome.runtime.onMessage.addListener(function (answer)
            {
            if(answer.from === 'b_r_m_background')
                {
                    if(typeof(answer) != 'undefined')
                    {
                        var row = '<tr><td>'+answer.command+'<td>'+answer.target+'<td>'+answer.value;
                        $('#mytbl').append(row);
                        console.log(answer.msg)
                        //alert(answer.msg);
                    }
                 }
            });


   });  

//create new window of type panel
var run =0;
var win_id;
var ifClosed=1;
var vid=0;
var xx ;
var actvTabId;


    chrome.browserAction.onClicked.addListener(function(tab) 
    {
    chrome.tabs.getSelected(null, function(tab) { 
    actvTabId = tab.id
    });



        chrome.windows.getCurrent(function(win)
        {
            xx = win;
            if(run==0 && ifClosed ==1)
            {
                chrome.windows.create({ type:"panel",url: "index.html","width" : 400,"height" : 600}, function(win) 
                {
                    win_id = win.id;
                //  alert('creating '+win_id);
                    run++;
                    ifClosed=0;
                });
            }
            else if(ifClosed == 0)
            {
                //alert('updating '+win_id);
                chrome.windows.update(win_id, {focused: true});
            }

        });
    }); 


        //listen for a message coming from panel_window
        chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) 
        {

            if(request.from == 'cancel')
            {

                //sending to active tab (myscript) from back 

                    //console.log('sending to myscript from back_cancel');
                    //console.log(sender);
                    chrome.tabs.query({active:true}, function(tabs)
                    {
                        for(var i=0;i<tabs.length;i++)
                        {
                            if(tabs[i].selected == true)
                            {
                                //chrome.tabs.update(tabs[i].id, {selected: true});
                                //send to active tab to myscript from back_cancel_button
                                chrome.tabs.sendMessage(tabs[i].id, {from : 'btn2_2_cancel'}, function(response) {});
                            }
                        }
                    });
                //console.log('sent from back.js');



            }
            //listen incoming from panel_window_record_button
            else if(request.from === 'record')
            {

                chrome.tabs.query({active:true}, function(tabs)
                {
                    for(var i=0;i<tabs.length;i++)
                    {
                        if(tabs[i].selected == true)
                        {
                            //chrome.tabs.update(tabs[i].id, {selected: true});
                            //sending to active tab (myscript) from back 
                            try
                            {
                            //send to active tab to myscript from backgrund_record
                            chrome.tabs.sendMessage(tabs[i].id, {from : 'btn_record',win_id:xx.id}, function(response) {});
                            }
                            catch(e)
                            {
                                alert('record background send failed');
                            }
                        }
                    }
                });
            }
            //listen incoming from active tab from myscript for logging events
            else if ( request.from =='btn_record_myscript' )
            {
                //send to panel window from background for logging events
                chrome.runtime.sendMessage({from:'b_r_m_background',msg : request.msg});
            }

        });


//when panel_window is closed
        chrome.windows.onRemoved.addListener(function (event)
        {

        chrome.browserAction.setBadgeText({tabId : actvTabId,text: ''});
            ifClosed = 1;
            run=0;  
            //alert(ifClosed);
            //alert('window is closed');
            chrome.tabs.query({active:true}, function(tabs)
            {
                for(var i=0;i<tabs.length;i++)
                {
                    if(tabs[i].selected == true)
                    {
                    chrome.tabs.sendMessage(tabs[i].id, {from : 'btn2_2_cancel'}, function(response) {});
                    }
                break;
                }
            });
        });

var cntr=0;
var cbtr2=0;
var typed = '';
var tp='null';
var isFirstTime=0;

        $(document).ready(function()    
        {
            //listen for incoming from background
            chrome.extension.onMessage.addListener(function (message,sender, sendResponse)
            {

                //listen incoming from cancel_button_background_panel_window
                if(message.from === 'btn2_2_cancel')
                {
                    //console.log('cencelling');
                    //in case of 'panel window close' or 'cancel button click' unbind all events from page
                    $('body').unbind('mouseover');
                    $('body').unbind('mouseout');
                    $('body').unbind('click');
                    $('body').unbind('keydown');

                }

                else if(message.from === 'btn_record')
                {

                    current_loc = window.location.href;
                    $( "body" ).click(function( event ) 
                    {                   

                            //find element being clicked 
                            var ele = document.getElementsByTagName(event.target.nodeName);
                        //  alert('sending from click');

                            chrome.runtime.sendMessage({from : 'btn_record_myscript',msg : ele[0]});

                    });

                    //change event for 'input type=text'
                    var key_detect;
                    $("input").change(function(eventChange)
                    {
                    var ele = document.getElementsByTagName(eventChange.target.nodeName);

                        //key detect event  
                        $("body").keydown(function (eventKey)
                        {
                            key_detect = eventKey.key;
                        });
                        //check if user has pressed enter 
                        if(key_detect == 13 || eventChange.type == 'change')
                        {               
                            typed = eventChange.target.value;
                        //  alert('sending from type');
                            chrome.runtime.sendMessage({from : 'btn_record_myscript', msg : ele});
                        }
                    });

                }
                else
                {
                alert('error');
                }


            });
////////onMessage Listener ends///////////      
                });

<!doctype html>
<html lang="en">
<head>
<script src="jquery.js"></script>
  <script src = "popup.js"></script>

  <meta charset="utf-8">


  <title>My AddOn</title>

  <link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body >

<div>
<input type="button" value="Re" id ="rcrd_btnr" name="record"  style="position:absolute;left:40%;text-align: center;background-color : red ;text-decoration: bold;font-size: 10px;padding:10px 10px;border: none;color: white;cursor: pointer;border-radius:100%"/> 
<input type="button" value="Re" id ="rcrd_btnb" name="record"  hidden style="position:relative;left:40%;text-align: center;background-color : blue ;text-decoration: bold;font-size: 10px;padding:10px 10px;border: none;color: white;cursor: pointer;border-radius:100%"/> 
</div>
</body>
</html>

{
    "name": "TestExtension",
    "version": "1.0.0",
    "manifest_version": 2,
    "description" : "Test Descr.",
    "icons": { "48": "bear.png"},

    "browser_action": {
        "default_icon": { "16": "bear.png", "32": "bear.png" },
        "default_title": "Test Addon"
    },
    "permissions": ["tabs"],
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["jquery.js","popup.js","myScript.js"]
    }]
}