Javascript 如何将chrome扩展中选定的文本从背景脚本传递到内容脚本?
我正在建立一个基本上是一个抄袭检查扩展。因此,您复制文本,然后右键单击,然后您就可以直接访问我们的网站。现在,我想做的是,我想从我复制的网站发送所选文本到我的网站输入页面,然后我想单击提交按钮。 为此,我需要执行这两行Javascript 如何将chrome扩展中选定的文本从背景脚本传递到内容脚本?,javascript,jquery,google-chrome-extension,Javascript,Jquery,Google Chrome Extension,我正在建立一个基本上是一个抄袭检查扩展。因此,您复制文本,然后右键单击,然后您就可以直接访问我们的网站。现在,我想做的是,我想从我复制的网站发送所选文本到我的网站输入页面,然后我想单击提交按钮。 为此,我需要执行这两行 document.getElementById("mycontent").value = "selected text"; document.getElementById("checkButton").click(); 但是所选文本只保留在backg
document.getElementById("mycontent").value = "selected text";
document.getElementById("checkButton").click();
但是所选文本只保留在background.js中,并且永远不会显示在内容脚本中,这就是我的扩展无法工作的原因。因此,我想知道如何解决这个问题,或者是否有其他方法可以输入文本并单击按钮。Background.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;
}
}
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
在这一行
chrome.tabs.executeScript({file:'contentScript.js'})
中,您没有将您的selectionText传递给内容脚本,您可以从许多方面了解我的两个建议:
背景脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
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'});
});
内容脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
在内容脚本中,您应该能够检索ex:
alert('mycontent:' + config);
2。在backgound和内容脚本之间使用chrome messages api
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
背景脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
内容脚本
//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'
})
chrome.storage.sync.set({'content':ex})
3.使用chrome存储
//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'
})
chrome.storage.sync.set({'content':ex})
背景脚本
//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'
})
chrome.storage.sync.set({'content':ex})
内容脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
清单
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
在这一行
chrome.tabs.executeScript({file:'contentScript.js'})
中,您没有将您的selectionText传递给内容脚本,您可以从许多方面了解我的两个建议:
背景脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
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'});
});
内容脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
在内容脚本中,您应该能够检索ex:
alert('mycontent:' + config);
2。在backgound和内容脚本之间使用chrome messages api
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
背景脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
内容脚本
//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'
})
chrome.storage.sync.set({'content':ex})
3.使用chrome存储
//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'
})
chrome.storage.sync.set({'content':ex})
背景脚本
//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'
})
chrome.storage.sync.set({'content':ex})
内容脚本
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
清单
// background script
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request.type==="Getcontent"){
const content=// set your content
sendMessage({msg:"cont",content:content})
}
})
chrome.storage.sync.get(['content'], function(res) {
console.log('Value currently is ' + res.content);
});
"permissions": ["storage"]
你能告诉我应该把这些代码放在哪里吗?我的意思是,我应该把哪些代码放在background.js中,我应该把哪些代码放在contentscript.js中。我已经调整了答案,让我知道它是否有效。什么都没有发生。我已经编辑了我的问题,这就是我粘贴代码的方式。如果你觉得有什么不对劲,你可以告诉我。此外,您可以使用完整的代码再次编辑您的答案,以便我可以使用。如果您尝试使用两种方法,请先尝试第一种方法,然后查看它是否适用于您仅使用1下的代码。使用chrome.tabs.executeScript apiI,我分别使用了这两个代码,但没有发生任何事情代码执行时没有错误,但控制台日志中没有任何内容,警报代码中也没有说明未定义配置。另外,在添加id之后,它只是停止执行内部代码。我将把清单添加到任务中,这样你就可以检查是否有任何错误。你能告诉我应该把代码放在哪里吗?我的意思是,我应该把哪些代码放在background.js中,我应该把哪些代码放在contentscript.js中。我已经调整了答案,让我知道它是否有效。什么都没有发生。我已经编辑了我的问题,这就是我粘贴代码的方式。如果你觉得有什么不对劲,你可以告诉我。此外,您可以使用完整的代码再次编辑您的答案,以便我可以使用。如果您尝试使用两种方法,请先尝试第一种方法,然后查看它是否适用于您仅使用1下的代码。使用chrome.tabs.executeScript apiI,我分别使用了这两个代码,但没有发生任何事情代码执行时没有错误,但控制台日志中没有任何内容,警报代码中也没有说明未定义配置。另外,在添加id之后,它只是停止执行内部代码。我将把清单添加到任务中,这样你就可以检查任何错误