从浏览器扩展调用网页 JavaScript 方法
Calling webpage JavaScript methods from browser extension
我正在使用 webExtensions 开发 firefox 扩展，这将帮助我在下面的场景中简化工作。
我必须在站点上单击大约 50-60 个按钮来更新任务状态。单击此按钮时，网页会调用网页的 updTask(id) JavaScript 函数，然后调用网络服务来更新任务。
我无法使用以下代码从我的内容脚本中执行此操作：
manifest.json:
"permissions": [
"activeTab",
"cross-domain-content": ["http://workdomain.com/","http://workdomain.org/","http://www.workdomain.com/","http://www.workdomain.org/"]
]
内容脚本代码：
function taskUpdate(request, sender, sendResponse) {
console.log(request.start + 'inside task update');
updateTask(45878);
chrome.runtime.onMessage.removeListener(taskUpdate);
}
function updateTask(id) {
//TODO: code to get all buttons and task id's
updTask(id); // Not working
}
插件脚本：
document.addEventListener("click", function(e) {
if (e.target.classList.contains("startButton")) {
chrome.tabs.executeScript(null, {
file: "/content_scripts/taskUpdate.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {start: "start"});
});
return;
}
else if (e.target.classList.contains("clear")) {
chrome.tabs.reload();
window.close();
return;
}
});
有人能给我指出正确的方向吗，我在这里错过了什么？？
您的内容脚本与页面脚本（网页中已存在的脚本）不同context/scope。您的内容脚本具有比授予页面脚本更高的权限。将内容脚本与页面脚本分开是浏览器扩展的正常架构，这样做是出于安全原因。
因为您的内容脚本与页面脚本处于不同的上下文中，所以您无法从内容脚本直接访问页面脚本中定义的函数和变量。您可以通过几种不同的方式访问页面上下文中的信息。这样做的跨浏览器方法是使代码的某些特定部分在页面上下文中执行。我发现最方便且跨浏览器兼容的方法是创建一个 <script> 元素并将其插入到包含您要执行的代码的页面 DOM 中。
你可以这样做：
function updateTask(id) {
let newScript = document.createElement('script');
newScript.innerHTML='updTask(' + id + ');';
document.head.appendChild(newScript);
//newScript.remove(); //Can be removed, if desired.
}
添加的脚本在页面上下文中得到 运行，因为它现在是 DOM 中的一个 <script> 元素。浏览器识别出添加了 <script> 元素，并在插入它的脚本不再处理时对其进行评估（执行包含的代码）。对于您添加到 DOM 的任何其他元素，它的作用基本相同。因为它是页面的一部分，所以页面脚本 context/scope.
中的代码获取 运行
将数据返回到您的内容脚本
在页面上下文中的代码和内容脚本上下文中的代码之间可以通过多种方式进行通信。运行ning。我的首选方法是使用 CustomEvents. I describe why in the first part of this answer。通常，我至少使用一种自定义事件类型从页面上下文与内容脚本上下文进行通信，并使用另一种自定义事件类型从内容脚本上下文与页面上下文进行通信。您可以根据需要使用任意数量的 CustomEvent 类型。我会经常使用多个事件，每个事件传达不同的东西，而不是我从中解析几种不同类型的消息的单一事件类型。
从内容脚本在页面上下文中执行的通用代码
维护要在页面上下文中执行的代码的最简单方法是将其编写为内容脚本中的函数，然后将该函数注入页面上下文。下面是一些通用代码，它们会在将参数传递给您在页面上下文中执行的函数时执行此操作：
此实用函数 executeInPage() 将在页面上下文中执行一个函数，并将提供的任何参数传递给该函数。参数必须是 Object, Array, function, RegExp, Date, and/or other primitives (Boolean, null, undefined, Number, String, but not Symbol)。
/* executeInPage takes a function defined in this context, converts it to a string
* and inserts it into the page context inside a <script>. It is placed in an IIFE and
* passed all of the additional parameters passed to executeInPage.
* Parameters:
* func The function which you desire to execute in the page.
* leaveInPage If this does not evaluate to a truthy value, then the <script> is
* immediately removed from the page after insertion. Immediately
* removing the script can normally be done. In some corner cases,
* it's desirable for the script to remain in the page. However,
* even for asynchronous functionality it's usually not necessary, as
* the context containing the code will be kept with any references
* (e.g. the reference to a callback function).
* id If this is a non-blank string, it is used as the ID for the <script>
* All additional parameters are passed to the function executing in the page.
* This is done by converting them to JavaScript code-text and back.
* All such parameters must be Object, Array, functions, RegExp,
* Date, and/or other primitives (Boolean, null, undefined, Number,
* String, but not Symbol). Circular references are not supported.
* If you need to communicate DOM elements, you will need to
* pass selectors, or other descriptors of them (e.g. temporarily
* assign them a unique class), or otherwise communicate them to the
* script (e.g. you could dispatch a custom event once the script is
* inserted into the page context).
*/
function executeInPage(functionToRunInPage, leaveInPage, id) {
//Execute a function in the page context.
// Any additional arguments passed to this function are passed into the page to the
// functionToRunInPage.
// Such arguments must be JSON-ifiable (also Date, Function, and RegExp) (prototypes
// are not copied).
// Using () => doesn't set arguments, so can't use it to define this function.
// This has to be done without jQuery, as jQuery creates the script
// within this context, not the page context, which results in
// permission denied to run the function.
function convertToText(args) {
//This uses the fact that the arguments are converted to text which is
// interpreted within a <script>. That means we can create other types of
// objects by recreating their normal JavaScript representation.
// It's actually easier to do this without JSON.strigify() for the whole
// Object/Array.
var asText = '';
var level = 0;
function lineSeparator(adj, isntLast) {
level += adj - ((typeof isntLast === 'undefined' || isntLast) ? 0 : 1);
asText += (isntLast ? ',' : '') +'\n'+ (new Array(level * 2 + 1)).join('');
}
function recurseObject(obj) {
if (Array.isArray(obj)) {
asText += '[';
lineSeparator(1);
obj.forEach(function(value, index, array) {
recurseObject(value);
lineSeparator(0, index !== array.length - 1);
});
asText += ']';
} else if (obj === null) {
asText +='null';
//undefined
} else if (obj === void(0)) {
asText +='void(0)';
//Special cases for Number
} else if (Number.isNaN(obj)) {
asText +='Number.NaN';
} else if (obj === 1/0) {
asText +='1/0';
} else if (obj === 1/-0) {
asText +='1/-0';
//function
} else if (obj instanceof RegExp || typeof obj === 'function') {
asText += obj.toString();
} else if (obj instanceof Date) {
asText += 'new Date("' + obj.toJSON() + '")';
} else if (typeof obj === 'object') {
asText += '{';
lineSeparator(1);
Object.keys(obj).forEach(function(prop, index, array) {
asText += JSON.stringify(prop) + ': ';
recurseObject(obj[prop]);
lineSeparator(0, index !== array.length - 1);
});
asText += '}';
} else if (['boolean', 'number', 'string'].indexOf(typeof obj) > -1) {
asText += JSON.stringify(obj);
} else {
console.log('Didn\'t handle: typeof obj:', typeof obj, ':: obj:', obj);
}
}
recurseObject(args);
return asText;
}
var newScript = document.createElement('script');
if(typeof id === 'string' && id) {
newScript.id = id;
}
var args = [];
//using .slice(), or other Array methods, on arguments prevents optimization
for(var index=3;index<arguments.length;index++){
args.push(arguments[index]);
}
newScript.textContent = '(' + functionToRunInPage.toString() + ').apply(null,'
+ convertToText(args) + ");";
(document.head || document.documentElement).appendChild(newScript);
if(!leaveInPage) {
//Synchronous scripts are executed immediately and can be immediately removed.
//Scripts with asynchronous functionality of any type must remain in the page
// until complete.
document.head.removeChild(newScript);
}
return newScript;
};
使用excuteInPage()：
function logInPageContext(arg0,arg1,arg2,arg3){
console.log('arg0:', arg0);
console.log('arg1:', arg1);
console.log('arg2:', arg2);
console.log('arg3:', arg3);
}
executeInPage(logInPageContext, false, '', 'This', 'is', 'a', 'test');
/* executeInPage takes a function defined in this context, converts it to a string
* and inserts it into the page context inside a <script>. It is placed in an IIFE and
* passed all of the additional parameters passed to executeInPage.
* Parameters:
* func The function which you desire to execute in the page.
* leaveInPage If this does not evaluate to a truthy value, then the <script> is
* immediately removed from the page after insertion. Immediately
* removing the script can normally be done. In some corner cases,
* it's desirable for the script to remain in the page. However,
* even for asynchronous functionality it's usually not necessary, as
* the context containing the code will be kept with any references
* (e.g. the reference to a callback function).
* id If this is a non-blank string, it is used as the ID for the <script>
* All additional parameters are passed to the function executing in the page.
* This is done by converting them to JavaScript code-text and back.
* All such parameters must be Object, Array, functions, RegExp,
* Date, and/or other primitives (Boolean, null, undefined, Number,
* String, but not Symbol). Circular references are not supported.
* If you need to communicate DOM elements, you will need to
* pass selectors, or other descriptors of them (e.g. temporarily
* assign them a unique class), or otherwise communicate them to the
* script (e.g. you could dispatch a custom event once the script is
* inserted into the page context).
*/
function executeInPage(functionToRunInPage, leaveInPage, id) {
//Execute a function in the page context.
// Any additional arguments passed to this function are passed into the page to the
// functionToRunInPage.
// Such arguments must be JSON-ifiable (also Date, Function, and RegExp) (prototypes
// are not copied).
// Using () => doesn't set arguments, so can't use it to define this function.
// This has to be done without jQuery, as jQuery creates the script
// within this context, not the page context, which results in
// permission denied to run the function.
function convertToText(args) {
//This uses the fact that the arguments are converted to text which is
// interpreted within a <script>. That means we can create other types of
// objects by recreating their normal JavaScript representation.
// It's actually easier to do this without JSON.strigify() for the whole
// Object/Array.
var asText = '';
var level = 0;
function lineSeparator(adj, isntLast) {
level += adj - ((typeof isntLast === 'undefined' || isntLast) ? 0 : 1);
asText += (isntLast ? ',' : '') +'\n'+ (new Array(level * 2 + 1)).join('');
}
function recurseObject(obj) {
if (Array.isArray(obj)) {
asText += '[';
lineSeparator(1);
obj.forEach(function(value, index, array) {
recurseObject(value);
lineSeparator(0, index !== array.length - 1);
});
asText += ']';
} else if (obj === null) {
asText +='null';
//undefined
} else if (obj === void(0)) {
asText +='void(0)';
//Special cases for Number
} else if (Number.isNaN(obj)) {
asText +='Number.NaN';
} else if (obj === 1/0) {
asText +='1/0';
} else if (obj === 1/-0) {
asText +='1/-0';
//function
} else if (obj instanceof RegExp || typeof obj === 'function') {
asText += obj.toString();
} else if (obj instanceof Date) {
asText += 'new Date("' + obj.toJSON() + '")';
} else if (typeof obj === 'object') {
asText += '{';
lineSeparator(1);
Object.keys(obj).forEach(function(prop, index, array) {
asText += JSON.stringify(prop) + ': ';
recurseObject(obj[prop]);
lineSeparator(0, index !== array.length - 1);
});
asText += '}';
} else if (['boolean', 'number', 'string'].indexOf(typeof obj) > -1) {
asText += JSON.stringify(obj);
} else {
console.log('Didn\'t handle: typeof obj:', typeof obj, ':: obj:', obj);
}
}
recurseObject(args);
return asText;
}
var newScript = document.createElement('script');
if(typeof id === 'string' && id) {
newScript.id = id;
}
var args = [];
//using .slice(), or other Array methods, on arguments prevents optimization
for(var index=3;index<arguments.length;index++){
args.push(arguments[index]);
}
newScript.textContent = '(' + functionToRunInPage.toString() + ').apply(null,'
+ convertToText(args) + ");";
(document.head || document.documentElement).appendChild(newScript);
if(!leaveInPage) {
//Synchronous scripts are executed immediately and can be immediately removed.
//Scripts with asynchronous functionality of any type must remain in the page
// until complete.
document.head.removeChild(newScript);
}
return newScript;
};
这个答案的文字主要来自我的其他答案： and .
我今天遇到了类似的问题，我的 webextension 不得不调用一个只能从特定网页的上下文访问的 javascript 函数，我有点恼火，因为我应该做所有的脚本注入和 json 序列化等等。但实际上有一个非常简单的解决方案：
window.eval(`updTask(${id})`)
eval 将在页面上下文而不是内容脚本中执行您传递给它的任何代码。
是的，我知道 eval 是邪恶的，但在这种情况下它确实有意义，因为我想做的事情（在网页上下文中执行任意代码）是邪恶的根据定义。这就像用正则表达式解析 HTML；一旦你到了那个点，你就被污染了。此外，您终于摆脱了编写被视为合法商品的代码的负担。因此，让我们拥抱 eval，就这一次 ;)
我正在使用 webExtensions 开发 firefox 扩展，这将帮助我在下面的场景中简化工作。
我必须在站点上单击大约 50-60 个按钮来更新任务状态。单击此按钮时，网页会调用网页的 updTask(id) JavaScript 函数，然后调用网络服务来更新任务。
我无法使用以下代码从我的内容脚本中执行此操作：
manifest.json:
"permissions": [
"activeTab",
"cross-domain-content": ["http://workdomain.com/","http://workdomain.org/","http://www.workdomain.com/","http://www.workdomain.org/"]
]
内容脚本代码：
function taskUpdate(request, sender, sendResponse) {
console.log(request.start + 'inside task update');
updateTask(45878);
chrome.runtime.onMessage.removeListener(taskUpdate);
}
function updateTask(id) {
//TODO: code to get all buttons and task id's
updTask(id); // Not working
}
插件脚本：
document.addEventListener("click", function(e) {
if (e.target.classList.contains("startButton")) {
chrome.tabs.executeScript(null, {
file: "/content_scripts/taskUpdate.js"
});
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {start: "start"});
});
return;
}
else if (e.target.classList.contains("clear")) {
chrome.tabs.reload();
window.close();
return;
}
});
有人能给我指出正确的方向吗，我在这里错过了什么？？
您的内容脚本与页面脚本（网页中已存在的脚本）不同context/scope。您的内容脚本具有比授予页面脚本更高的权限。将内容脚本与页面脚本分开是浏览器扩展的正常架构，这样做是出于安全原因。
因为您的内容脚本与页面脚本处于不同的上下文中，所以您无法从内容脚本直接访问页面脚本中定义的函数和变量。您可以通过几种不同的方式访问页面上下文中的信息。这样做的跨浏览器方法是使代码的某些特定部分在页面上下文中执行。我发现最方便且跨浏览器兼容的方法是创建一个 <script> 元素并将其插入到包含您要执行的代码的页面 DOM 中。
你可以这样做：
function updateTask(id) {
let newScript = document.createElement('script');
newScript.innerHTML='updTask(' + id + ');';
document.head.appendChild(newScript);
//newScript.remove(); //Can be removed, if desired.
}
添加的脚本在页面上下文中得到 运行，因为它现在是 DOM 中的一个 <script> 元素。浏览器识别出添加了 <script> 元素，并在插入它的脚本不再处理时对其进行评估（执行包含的代码）。对于您添加到 DOM 的任何其他元素，它的作用基本相同。因为它是页面的一部分，所以页面脚本 context/scope.
将数据返回到您的内容脚本
在页面上下文中的代码和内容脚本上下文中的代码之间可以通过多种方式进行通信。运行ning。我的首选方法是使用 CustomEvents. I describe why in the first part of this answer。通常，我至少使用一种自定义事件类型从页面上下文与内容脚本上下文进行通信，并使用另一种自定义事件类型从内容脚本上下文与页面上下文进行通信。您可以根据需要使用任意数量的 CustomEvent 类型。我会经常使用多个事件，每个事件传达不同的东西，而不是我从中解析几种不同类型的消息的单一事件类型。
从内容脚本在页面上下文中执行的通用代码
维护要在页面上下文中执行的代码的最简单方法是将其编写为内容脚本中的函数，然后将该函数注入页面上下文。下面是一些通用代码，它们会在将参数传递给您在页面上下文中执行的函数时执行此操作：
此实用函数 executeInPage() 将在页面上下文中执行一个函数，并将提供的任何参数传递给该函数。参数必须是 Object, Array, function, RegExp, Date, and/or other primitives (Boolean, null, undefined, Number, String, but not Symbol)。
/* executeInPage takes a function defined in this context, converts it to a string
* and inserts it into the page context inside a <script>. It is placed in an IIFE and
* passed all of the additional parameters passed to executeInPage.
* Parameters:
* func The function which you desire to execute in the page.
* leaveInPage If this does not evaluate to a truthy value, then the <script> is
* immediately removed from the page after insertion. Immediately
* removing the script can normally be done. In some corner cases,
* it's desirable for the script to remain in the page. However,
* even for asynchronous functionality it's usually not necessary, as
* the context containing the code will be kept with any references
* (e.g. the reference to a callback function).
* id If this is a non-blank string, it is used as the ID for the <script>
* All additional parameters are passed to the function executing in the page.
* This is done by converting them to JavaScript code-text and back.
* All such parameters must be Object, Array, functions, RegExp,
* Date, and/or other primitives (Boolean, null, undefined, Number,
* String, but not Symbol). Circular references are not supported.
* If you need to communicate DOM elements, you will need to
* pass selectors, or other descriptors of them (e.g. temporarily
* assign them a unique class), or otherwise communicate them to the
* script (e.g. you could dispatch a custom event once the script is
* inserted into the page context).
*/
function executeInPage(functionToRunInPage, leaveInPage, id) {
//Execute a function in the page context.
// Any additional arguments passed to this function are passed into the page to the
// functionToRunInPage.
// Such arguments must be JSON-ifiable (also Date, Function, and RegExp) (prototypes
// are not copied).
// Using () => doesn't set arguments, so can't use it to define this function.
// This has to be done without jQuery, as jQuery creates the script
// within this context, not the page context, which results in
// permission denied to run the function.
function convertToText(args) {
//This uses the fact that the arguments are converted to text which is
// interpreted within a <script>. That means we can create other types of
// objects by recreating their normal JavaScript representation.
// It's actually easier to do this without JSON.strigify() for the whole
// Object/Array.
var asText = '';
var level = 0;
function lineSeparator(adj, isntLast) {
level += adj - ((typeof isntLast === 'undefined' || isntLast) ? 0 : 1);
asText += (isntLast ? ',' : '') +'\n'+ (new Array(level * 2 + 1)).join('');
}
function recurseObject(obj) {
if (Array.isArray(obj)) {
asText += '[';
lineSeparator(1);
obj.forEach(function(value, index, array) {
recurseObject(value);
lineSeparator(0, index !== array.length - 1);
});
asText += ']';
} else if (obj === null) {
asText +='null';
//undefined
} else if (obj === void(0)) {
asText +='void(0)';
//Special cases for Number
} else if (Number.isNaN(obj)) {
asText +='Number.NaN';
} else if (obj === 1/0) {
asText +='1/0';
} else if (obj === 1/-0) {
asText +='1/-0';
//function
} else if (obj instanceof RegExp || typeof obj === 'function') {
asText += obj.toString();
} else if (obj instanceof Date) {
asText += 'new Date("' + obj.toJSON() + '")';
} else if (typeof obj === 'object') {
asText += '{';
lineSeparator(1);
Object.keys(obj).forEach(function(prop, index, array) {
asText += JSON.stringify(prop) + ': ';
recurseObject(obj[prop]);
lineSeparator(0, index !== array.length - 1);
});
asText += '}';
} else if (['boolean', 'number', 'string'].indexOf(typeof obj) > -1) {
asText += JSON.stringify(obj);
} else {
console.log('Didn\'t handle: typeof obj:', typeof obj, ':: obj:', obj);
}
}
recurseObject(args);
return asText;
}
var newScript = document.createElement('script');
if(typeof id === 'string' && id) {
newScript.id = id;
}
var args = [];
//using .slice(), or other Array methods, on arguments prevents optimization
for(var index=3;index<arguments.length;index++){
args.push(arguments[index]);
}
newScript.textContent = '(' + functionToRunInPage.toString() + ').apply(null,'
+ convertToText(args) + ");";
(document.head || document.documentElement).appendChild(newScript);
if(!leaveInPage) {
//Synchronous scripts are executed immediately and can be immediately removed.
//Scripts with asynchronous functionality of any type must remain in the page
// until complete.
document.head.removeChild(newScript);
}
return newScript;
};
使用excuteInPage()：
function logInPageContext(arg0,arg1,arg2,arg3){
console.log('arg0:', arg0);
console.log('arg1:', arg1);
console.log('arg2:', arg2);
console.log('arg3:', arg3);
}
executeInPage(logInPageContext, false, '', 'This', 'is', 'a', 'test');
/* executeInPage takes a function defined in this context, converts it to a string
* and inserts it into the page context inside a <script>. It is placed in an IIFE and
* passed all of the additional parameters passed to executeInPage.
* Parameters:
* func The function which you desire to execute in the page.
* leaveInPage If this does not evaluate to a truthy value, then the <script> is
* immediately removed from the page after insertion. Immediately
* removing the script can normally be done. In some corner cases,
* it's desirable for the script to remain in the page. However,
* even for asynchronous functionality it's usually not necessary, as
* the context containing the code will be kept with any references
* (e.g. the reference to a callback function).
* id If this is a non-blank string, it is used as the ID for the <script>
* All additional parameters are passed to the function executing in the page.
* This is done by converting them to JavaScript code-text and back.
* All such parameters must be Object, Array, functions, RegExp,
* Date, and/or other primitives (Boolean, null, undefined, Number,
* String, but not Symbol). Circular references are not supported.
* If you need to communicate DOM elements, you will need to
* pass selectors, or other descriptors of them (e.g. temporarily
* assign them a unique class), or otherwise communicate them to the
* script (e.g. you could dispatch a custom event once the script is
* inserted into the page context).
*/
function executeInPage(functionToRunInPage, leaveInPage, id) {
//Execute a function in the page context.
// Any additional arguments passed to this function are passed into the page to the
// functionToRunInPage.
// Such arguments must be JSON-ifiable (also Date, Function, and RegExp) (prototypes
// are not copied).
// Using () => doesn't set arguments, so can't use it to define this function.
// This has to be done without jQuery, as jQuery creates the script
// within this context, not the page context, which results in
// permission denied to run the function.
function convertToText(args) {
//This uses the fact that the arguments are converted to text which is
// interpreted within a <script>. That means we can create other types of
// objects by recreating their normal JavaScript representation.
// It's actually easier to do this without JSON.strigify() for the whole
// Object/Array.
var asText = '';
var level = 0;
function lineSeparator(adj, isntLast) {
level += adj - ((typeof isntLast === 'undefined' || isntLast) ? 0 : 1);
asText += (isntLast ? ',' : '') +'\n'+ (new Array(level * 2 + 1)).join('');
}
function recurseObject(obj) {
if (Array.isArray(obj)) {
asText += '[';
lineSeparator(1);
obj.forEach(function(value, index, array) {
recurseObject(value);
lineSeparator(0, index !== array.length - 1);
});
asText += ']';
} else if (obj === null) {
asText +='null';
//undefined
} else if (obj === void(0)) {
asText +='void(0)';
//Special cases for Number
} else if (Number.isNaN(obj)) {
asText +='Number.NaN';
} else if (obj === 1/0) {
asText +='1/0';
} else if (obj === 1/-0) {
asText +='1/-0';
//function
} else if (obj instanceof RegExp || typeof obj === 'function') {
asText += obj.toString();
} else if (obj instanceof Date) {
asText += 'new Date("' + obj.toJSON() + '")';
} else if (typeof obj === 'object') {
asText += '{';
lineSeparator(1);
Object.keys(obj).forEach(function(prop, index, array) {
asText += JSON.stringify(prop) + ': ';
recurseObject(obj[prop]);
lineSeparator(0, index !== array.length - 1);
});
asText += '}';
} else if (['boolean', 'number', 'string'].indexOf(typeof obj) > -1) {
asText += JSON.stringify(obj);
} else {
console.log('Didn\'t handle: typeof obj:', typeof obj, ':: obj:', obj);
}
}
recurseObject(args);
return asText;
}
var newScript = document.createElement('script');
if(typeof id === 'string' && id) {
newScript.id = id;
}
var args = [];
//using .slice(), or other Array methods, on arguments prevents optimization
for(var index=3;index<arguments.length;index++){
args.push(arguments[index]);
}
newScript.textContent = '(' + functionToRunInPage.toString() + ').apply(null,'
+ convertToText(args) + ");";
(document.head || document.documentElement).appendChild(newScript);
if(!leaveInPage) {
//Synchronous scripts are executed immediately and can be immediately removed.
//Scripts with asynchronous functionality of any type must remain in the page
// until complete.
document.head.removeChild(newScript);
}
return newScript;
};
这个答案的文字主要来自我的其他答案：
我今天遇到了类似的问题，我的 webextension 不得不调用一个只能从特定网页的上下文访问的 javascript 函数，我有点恼火，因为我应该做所有的脚本注入和 json 序列化等等。但实际上有一个非常简单的解决方案：
window.eval(`updTask(${id})`)
eval 将在页面上下文而不是内容脚本中执行您传递给它的任何代码。
是的，我知道 eval 是邪恶的，但在这种情况下它确实有意义，因为我想做的事情（在网页上下文中执行任意代码）是邪恶的根据定义。这就像用正则表达式解析 HTML；一旦你到了那个点，你就被污染了。此外，您终于摆脱了编写被视为合法商品的代码的负担。因此，让我们拥抱 eval，就这一次 ;)