标签: content-script
如何为Chrome扩展程序打开/关闭按钮/图标？
我想让用户决定何时运行脚本,以便在浏览器打开时显示"off"图标并且没有脚本运行; 但是当用户点击它时,它会变为"on"图标并执行用户脚本,直到用户点击为止.我有两个png图标,每个32x32:on.png和off.png.
我的两个问题:
如何将默认图标设置为my off.png？我尝试了这个,
manifest.json但它没有设置图标,而是显示了一个拼图(我假设默认):
Run Code Online (Sandbox Code Playgroud)... "browser_action": { "default_icon": { "32": "off.png" }, "default_title": "icon" }, "icons": { "32": "on.png", "32": "off.png" }, "background": { "scripts": ["background.js"] }, "content_scripts": [{ "js": ["SCRIPT.user.js"] ...这是我的
background.js,我暂时做了一个快速的功能,试图根据一个开关来打开/关闭onClicked
Run Code Online (Sandbox Code Playgroud)var status = 0; function toggle() { if (status == 0){ chrome.browserAction.setIcon({path: "on.png", tabId:tab.id}); // so it's set for the tab user is in chrome.tabs.executeScript(tab.id, file:"SCRIPT.user.js"); //execute for this tab status++; } if (status == 1){ chrome.browserAction.setIcon({path: …
javascript google-chrome google-chrome-extension content-script
推荐指数
解决办法
查看次数
创建一个选项卡并在其中注入content-script会产生权限错误
在我的Chrome扩展程序的后台页面中,我需要执行以下操作:
- 创建一个带有html页面的选项卡,该页面位于我的扩展文件夹中或由后台页面动态生成 ;
- 加载新选项卡后,在其中注入内容脚本以使用消息传递;
- 注入脚本后,使用一些数据向新选项卡发送消息.
这总是变成错误:
tabs.executeScript:无法访问url""的内容.扩展清单必须请求访问此主机的权限.
或者,如果页面或脚本存储在我的扩展文件夹中的.html和.js专用文件中:
tabs.executeScript:无法访问URL"chrome-extension://ehdjfh.../page.html"的内容.扩展清单必须请求访问此主机的权限.
chrome.tabs.executeScript()执行时会生成错误,并阻止内容脚本注入.(我需要这个结构将一些大数据传递给选项卡,如果直接作为字符串传递给编码的html网址,它将被截断)
以下是一个代码示例,可用于测试行为扩展中的行为,只需在Chrome中复制粘贴并加载扩展程序:
background.js
chrome.browserAction.onClicked.addListener(function() {
var getSampleHTML = function() {
return 'javascript:\'<!doctype html><html>' +
'<head></head>' +
'<body>' +
'<p id="myId">page created...</p>' +
'</body>' +
'</html>\'';
};
// create a new tab with an html page that resides in extension domain:
chrome.tabs.create({'url': getSampleHTML(), 'active': false}, function(tab){
var getSampleScript = function() {
return 'chrome.extension.onRequest.addListener(' +
'function(request, sender, sendResponse) {' +
'if(request.action == "print_data" && sender.tab.id == ' + tab.id + '){' …推荐指数
解决办法
查看次数
Chrome 扩展 - 检测页面状态代码
我有一个操作网页的内容脚本。如果网页未加载（也许服务器给您错误 500，或者 chrome 无法连接），我希望它在一两分钟后重试并刷新页面。
如果 chrome 无法连接来加载页面，则内容脚本不会注入到页面中。不确定错误 500，但我知道您不能简单地从内容脚本中检测状态代码。
无论页面是否成功加载，如何检测页面的非 200 状态代码？我知道我可能必须在内容脚本之外执行此操作，但我不确定需要在哪里执行此操作。
javascript google-chrome http-status-codes google-chrome-extension content-script
推荐指数
解决办法
查看次数
尝试在chrome扩展(JavaScript)中从default_script到content_script进行通信无法正常工作
好吧,所以我通过扩展程序更改网站的配色方案,这是我第一次使用content_scripts所以是的,我是一个完整的新手,随意把我当作一个人.
问题是tabs.connect它不工作,我需要标签ID或什么？这是我到目前为止所拥有的:
manifest.json的:
{
"manifest_version": 2,
"name": "ROBLOX Color Scheme",
"description": "Edit the color scheme of the roblox bar! Note: Not created by roblox.",
"version": "1.0",
"permissions": [
"<all_urls>",
"tabs"
],
"browser_action": {
"default_icon": "Icon.png",
"default_popup": "Popup.html"
},
"content_scripts": [
{
"matches": ["http://www.roblox.com/*"],
"js": ["ContentScript.js"]
}
]
}
Popup.html:
<!DOCTYPE html>
<html>
<head>
<p>Choose a color:</p>
<input type="color" id="Color" value="">
<button type="button" id="Button">Change Color!</button>
</head>
<body>
<script src="Script.js"></script>
</body>
</html>
的script.js:
function ChangeColor() {
var TabId;
chrome.tabs.query({currentWindow: true, active: true}, …javascript google-chrome communication google-chrome-extension content-script
推荐指数
解决办法
查看次数
动态加载内容脚本(chrome扩展名)
我有一个chrome扩展,有一个由manifest和一个后台脚本注入的内容脚本.
{
"manifest_version": 2,
"name": "Test",
"permissions": [
"tabs", "<all_urls>", "activeTab", "storage"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [
"content/autofill/lib_generic.js",
"content/autofill/lib.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [
"content/specific_scripts/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
lib_generic.js包含一个名为的函数apply_forms(...)(其描述并不重要).该函数从lib.js文件中调用.但是这个过程不适用于几个页面,所以对于每个这样的页面,我有一个特殊的脚本 - 也只有一个名为的函数apply_forms(...).
我有一个函数,它将当前域作为输入并返回所需特定脚本的名称,或者false是否应使用泛型.
有太多的文件,它的逻辑更复杂,所以我不能只列出指令中的所有(url, script)对"content_scripts"(我也不想将所有特定文件作为内容脚本注入).
我在背景中尝试过类似的东西(请注意,它仅用于演示):
var url = ""; //url of current tab
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == "complete") {
var filename = getSpecificFilename(url);
chrome.tabs.executeScript(tabId, …javascript google-chrome google-chrome-extension content-script
推荐指数
解决办法
查看次数
在chrome扩展中，如何使用内容脚本注入一个Vue页面
我正在尝试实现一个 JSON 查看器 chrome 扩展。我已经使用 Vue ( http://treedoc.org )实现了查看器。现在的问题是如何使用 Chrome 扩展内容脚本注入 Vue 页面。
我发现这篇文章对于在扩展中注入普通的 javascript 文件非常有帮助。但这是一个已知的 javascript 文件名。
我发现这篇文章和这个vue-cli-plugin-browser-extension有助于将 Vue 用于扩展选项页面和覆盖页面等，因为它们的入口点是 HTML 文件。但是内容脚本入口点是一个javascript，要在内容脚本中注入一个javascript文件，你需要知道确切的文件名。使用插件和 Webpack，生成的 javascript 文件会附加哈希，例如“ override.0e5e7d0a.js ”，这是未知的。
推荐指数
解决办法
查看次数
如何从Chrome扩展程序后台脚本访问页面变量
使用内容脚本,您可以将脚本标记注入DOM,以便访问原始页面中的变量(如本问题中所述).
我想避免将代码注入每个页面,而只是在用户单击扩展图标时执行此操作.
当我尝试使用与内容脚本相同的代码时,值未定义,尽管脚本已正确插入.
这可能吗？否则使用内容脚本并与其通信首选解决方案？
这是我正在使用的代码:
var scr = document.createElement("script");
scr.type="text/javascript";
scr.innerHTML = "setInterval('console.log(window.testVar)', 1000)"
document.body.appendChild(scr)
清单摘录:
"permissions": [
"tabs",
"http://*/*", "https://*/*"
],
"background": {
"scripts": ["inject.js"]
},
推荐指数
解决办法
查看次数
我可以阻止点击触发网站的常规操作吗？
作为React.js的实验,我正在尝试构建一个chrome扩展,它使用内容脚本将输入字段(现在也是一个按钮)注入某些网站.在这种情况下,我试图将其注入Twitter.它看起来像这样:
请注意,代码将按钮和输入放在文本下方,但结果会相同
注射工作,但我实际上不能使用输入.我将元素注入主页上的推文,当我点击输入键入它时,它会触发推文并扩展或收缩.这会从输入中删除焦点,使其无效.我试图回调焦点onBlur,并且stopPropagation() onClick,但是onClick没有触发,我不确定如何恢复焦点onBlur.我怎么能不再失去焦点？
如果你想自己测试了一下,反应与- addons.js从入门工具包来到这里
编辑:我尝试在代码中添加按钮,看看我是否可以点击它,我可以.我可以点击它而不会触发推文本身.这意味着输入框中存在某些特定的问题,或者按钮中的某些内容阻止了点击的传播.当您点击其他元素没有推文可能有的输入字段时,是否有某些特殊触发？
编辑2:我现在尝试将stopPropagation添加到包含div并增加它的z-index,它们都不会停止它.
编辑3:我现在尝试使用stopPropagation onMouseDown(以及onMouseUp和onClick,同时),没有运气.奇怪的是我之后尝试了isPropagationStopped(),它返回true.如果是这样,为什么Twitter仍然被触发？
test_input.js
/**
* @jsx React.DOM
*/
var Test_Input = React.createClass({
maintain_focus: function(){
e.stopPropagation();
console.log("=====");
},
refocus: function(e){
e.stopPropagation();
},
handle_click: function{
console.log("clicked");
}
render: function(){
return (<div>
<button onclick={this.handle_click}>
<input className="new_note_input" placeholder="Note" onclick={this.maintain_focus} onBlur={this.refocus}></input>
</div>);
}
});
var elements_to_append_to = document.getElementsByClassName('content');
[].forEach.call(elements_to_append_to, function(element){
var container = $("<span />");
$(element).after(container);
React.renderComponent(<Test_Input />, container[0]);
});
的manifest.json
{
"name": "Test Input", …javascript twitter google-chrome-extension content-script reactjs
推荐指数
解决办法
查看次数
在 devtools 扩展中猴子修补反应的渲染方法
我正在尝试从 devtool 扩展中为 React 的渲染方法创建一个猴子补丁，因为我正在尝试为我的扩展中的一个功能重新创建类似于 react_devtool 的 api 的东西。我用这两行代码欺骗了被检查窗口的虚拟 DOM
var reactRoot = document.querySelector("[data-reactroot]")
var dom = reactRoot[Object.getOwnPropertyNames(reactRoot)[0]]
我还听说通过访问窗口的__REACT_DEVTOOLS_GLOBAL_HOOK__. 我需要能够在页面更新时从 React 的 internalInstance 访问一组新数据（setState/rerender）。
这是我对 React 的渲染方法进行猴子修补的尝试。此代码从通过 my 注入的单独文件运行，该文件content-scripts.js能够在检查的窗口中访问 React 应用程序的 dom。
const reactInstances = window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers
const instance = reactInstances[Object.keys(reactInstances)[0]]
console.log('current windows React INSTANCE: ', instance)
var reactRender = instance.Mount.render
console.log('reacts render method: ', reactRender)
reactRender = (function (original) {
return function (nextElement, container, callback) {
var result = original.apply(this, arguments)
console.log(original, result)
return result
} …javascript monkeypatching content-script reactjs react-devtools
推荐指数
解决办法
查看次数
如何匹配内容脚本（firefox）中的所有域名扩展？
我需要匹配我正在编写的简单 Firefox 扩展的所有域扩展。例如，我需要运行扩展：
我不希望扩展程序在“示例网站”以外的任何内容上运行，例如，
这在某种程度上很重要，这样我就不需要为我的扩展程序获得访问所有网站上的数据的权限。
笔记：
- 这不是关于正则表达式匹配本身的问题（这里似乎有不同的规则；这不是Regex Match Domain Extension的重复）
- 这不是Chrome 扩展的重复：在所有 google 域和特定页面上运行（不解决此问题）
javascript firefox firefox-addon google-chrome-extension content-script
推荐指数
解决办法
查看次数