从浏览器扩展调用网页JavaScript方法 [英] Calling webpage JavaScript methods from browser extension
问题描述
我正在使用 firefox 扩展程序nofollow noreferrer> webExtensions 可以帮助我轻松完成下面的工作。
I am developing an firefox extension using webExtensions that would help me ease my work with the scenario below.
我必须点击网站上的大约50-60个按钮更新任务状态。单击此按钮，网页将调用网页的 updTask（id） JavaScript函数，然后进行Web服务调用以更新任务。
I have to click around 50-60 buttons on the site that update the task status. On click of this button, the web page is calling the webpage's updTask(id) JavaScript function that is then making a web-service call to update the task.
我无法使用以下代码从我的内容脚本执行此操作：
I am not able to do this from my content script using the code below:
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;
}
});
有人能指出我正确的方向，我在这里缺少什么？
Could someone point me in the right direction, what am I missing here??
推荐答案
您的内容脚本与页面脚本（网页中已存在的脚本）的上下文/范围不同。您的内容脚本具有比授予页面脚本更高的权限。保持内容脚本与页面脚本分离是浏览器扩展的常规体系结构，出于安全原因这样做。
Your content script is in a different context/scope from that of page scripts (scripts that already exist in the webpage). Your content script has higher privileges than are granted to page scripts. Keeping content scripts separate from page scripts is a normal architecture for browser extensions which is done for security reasons.
为了在页面脚本上下文中执行代码，您已创建并在页面的DOM中插入< script> 元素。
In order to execute code in the page script context, you have create and insert a <script> element into the page's 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中的c $ c>< script> 元素。浏览器识别出添加了< script> 元素，并在插入它的脚本不再处理时立即对其进行评估（执行包含的代码）。对于添加到DOM的任何其他元素，它基本上都是一样的。因为它是页面的一部分，所以gets内部的代码在页面脚本上下文/范围中运行。
The added script gets run in the page context because it is now a <script> element in the DOM. The browser recognizes that a <script> element was added and evaluates it (executes the code contained) as soon as the script which inserted it is no longer processing. It does basically the same thing for any other element you add to the DOM. Because it is part of the page, the code inside the gets run in the page script context/scope.
维护要在页面上下文中执行的代码的最简单方法是将其作为函数写入内容脚本，然后将该函数注入页面上下文。下面是一些通用代码，它们将参数传递给您在页面上下文中执行的函数：
The easiest way to maintain code which you are going to execute in the page context is to write it as a function in your content script, then inject that function into the page context. Here is some generalized code which will do that while passing parameters to the function you are executing in the page context:
此实用程序函数， executeInPage（ ），将在页面上下文中执行一个函数，并将任何提供的参数传递给函数。参数必须是 Object ， 数组 ， function ， RegExp ， Date ，和/或其他原语（ Boolean ， null ， undefined ， Number ， String ，但不是 符号 ） 。
This utility function, executeInPage(), will execute a function in the page context and pass any provided arguments to the function. Arguments must be 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（）：
Using 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;
};
这篇关于从浏览器扩展调用网页JavaScript方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
