如何將 chrome 擴展中的選定文本從后台腳本傳遞到內容腳本？

Question

我正在構建一個擴展，它本質上是一個抄襲檢查器。 因此，您復制文本，然后右鍵單擊，然后您將被定向到我們的網站。 現在，我想要做的是我想將所選文本從我復制的網站發送到我的網站輸入頁面，然后我想點擊提交按鈕。 為此，我需要執行這兩行。

    document.getElementById("mycontent").value = "selected text";  
    document.getElementById("checkButton").click();    

但是所選文本僅保留在 background.js 中，並且永遠不會出現在內容腳本中，這就是我的擴展程序無法正常工作的原因。 所以，我想知道如何解決這個問題，或者有沒有其他方法可以輸入我的文本並單擊按鈕。
背景.js

  var contextsList = ["selection"];

    for(i = 0;i<contextsList.length; i++){
        var context = contextsList[i];
        var titleX = " Check Plagiarism of Selected Text";
        chrome.contextMenus.create({title: titleX, contexts:[context], onclick: clickHandler, id: context });
    }
  function clickHandler(data, tab) {
         switch(data.menuItemId.id){
            case 'selection' :
             ex = encodeURIComponent(data.selectionText);
 var config = {content: ex};
chrome.tabs.executeScript(tab.id, {
    code: 'var config = ' + JSON.stringify(config)
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'contentScript.js'});
});
// background script
  chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{

if(request.type==="Getcontent"){
    const  content=// set your content 
    sendMessage({msg:"cont",content:content})

}

})

chrome.tabs.create({url: "https://greatseotools.net/plagiarism-checker"});


   break;

            }

         }

內容腳本.js

        //Content script 
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{

    if(request==='content'){
     console.log("content",request.content)       
    }

})

//wrap this in an event 
chrome.runtime.sendMessage({
    type:'Getcontent'
})

manifest.json

    {
   "background": {
      "scripts": [ "background.js" ]
   },
   "browser_action": {
      "default_icon": "icons/19.png",
      "default_popup": "popup.html"
   },
   "content_scripts": [ {
      "all_frames": true,
      "js": ["contentScript.js" ],
      "matches": [ "*://*.greatseotools.net/*" ],
      "run_at": "document_end"
   } ],
   "description": "Check Plagiarism by just selecting text..",
   "homepage_url": "https://www.prepostseo.com/plagiarism-checker",
   "icons": {
      "128": "icons/128.png",
      "16": "icons/16.png",
      "48": "icons/48.png"
   },
    "manifest_version": 2,
   "name": "Plagiarism Checker for Chrome",
   "permissions": [ "activeTab","*://*/*", "https://ajax.googleapis.com/", "contextMenus" ],
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "1.0"
}

我必須在其上輸入文本並單擊按鈕的網站。

https://greatseotools.net/plagiarism-checker

Answer 1

在這一行chrome.tabs.executeScript({file: 'contentScript.js'})你沒有將你的 selectionText 傳遞給內容腳本你可以在很多方面實現這是我的兩個建議：

后台腳本

1.使用chrome.tabs.executeScript api

 ex = encodeURIComponent(data.selectionText);
 var config = {content: ex};
chrome.tabs.executeScript(tab.id, {
    code: 'var config = ' + JSON.stringify(config)
}, function() {
    chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});

內容腳本

在您的內容腳本中，您應該能夠檢索 ex：

alert('mycontent:' + config);

2. 在背景和內容腳本之間使用 chrome 消息 api

后台腳本

  // background script
  chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{

if(request.type==="Getcontent"){
    const  content=// set your content 
    sendMessage({msg:"cont",content:content})

}

})

內容腳本

//Content script 
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{

    if(request==='content'){
     console.log("content",request.content)       
    }

})

//wrap this in an event 
chrome.runtime.sendMessage({
    type:'Getcontent'
})

3.使用鉻存儲

后台腳本

 chrome.storage.sync.set({'content':ex})

內容腳本

chrome.storage.sync.get(['content'], function(res) {
      console.log('Value currently is ' + res.content);
    });

顯現

"permissions": ["storage"]