相关疑难解决方法(0)

我正在学习如何创建Chrome扩展程序.我刚开始开发一个来捕捉YouTube活动.我想将它与YouTube Flash播放器一起使用(稍后我将尝试使其与HTML5兼容).

manifest.json的:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

问题是控制台给了我"开始!" ,但没有"状态改变!" 当我播放/暂停YouTube视频时.

将此代码放入控制台时,它可以正常工作.我究竟做错了什么？

我有一个Greasemonkey脚本,在Firefox和Opera中运行良好.但是,我很难让它在Chrome中运行.问题是在页面中注入一个可以通过页面中的代码调用的函数.这是我到目前为止所做的事情:

首先,我得到一个帮助引用Firefox 的unsafeWindow.这让我可以使用相同的FF和Opera代码(我认为是Chrome).

var uw = (this.unsafeWindow) ? this.unsafeWindow : window;

接下来,我在页面中注入一个函数.它实际上只是一个非常薄的包装器,除了在GM脚本的上下文中调用相应的函数之外什么都不做:

uw.setConfigOption = function(newValue) {
    setTimeout(setConfigOption, 0, newValue);
}

然后,我的脚本中有相应的功能:

setConfigOption = function(newValue) {
    // do something with it, e.g. store in localStorage
}

最后,我在页面中注入一些HTML,并带有一个调用该函数的链接.

var p = document.createElement('p');
p.innerHTML = '<a href="javascript:setConfigOption(1)">set config option to 1</a>';
document.getElementById('injection-point').appendChild(p);

总结一下:在Firefox中,当用户单击该注入的链接时,它将在unsafeWindow上执行函数调用,然后触发超时,该超时在我的GM脚本的上下文中调用相应的函数,然后执行实际处理.(如果我错了,请纠正我.)

在Chrome中,我只是得到一个"未捕获的ReferenceError:setConfigOption未定义"错误.实际上,在控制台中输入"window.setConfigOption"会产生"未定义".在Firebug和Opera开发人员控制台中,功能就在那里.

也许有另一种方法可以做到这一点,但是我的一些函数是由页面上的Flash对象调用的,我认为这使得我必须在页面上下文中使用函数.

我在Greasemonkey维基上快速浏览了unsafeWindow的替代品,但它们看起来都非常难看.我在这里完全走错了轨道还是应该仔细研究这些？

决议:我跟着Max S. 建议,现在可以在Firefox和Chrome中使用.因为我需要对页面可用的函数必须回调常规函数,所以我将整个脚本移动到页面,即它完全包含在他称为"main()"的函数中.

为了使这个hack的额外丑陋更加可以忍受,我至少可以放弃unsafeWindow和wrappedJSObject的使用.

我还没有设法从Greasemonkey wiki中获取内容范围运行器.它应该做同样的事情似乎执行得很好,但是我的函数永远不会<a>被页面中的元素访问,例如.我还没弄清楚为什么会这样.

所以,我在DomainA上有一个页面,并且,使用Chrome扩展程序,我正在注入一些插入指向DomainB的iframe的javascript.

$("body").append("<iframe id='someFrame' src='http://www.domainB.com' width='300' height='800'></iframe>");

我还向DomainA注入了一些javascript,试图获取iframe的contentWindow.我想在它上面使用HTML5 postMessage api.

$("body").append("<a class='myLink'>Post Message</a>");
$(".myLink").click(function(){
    var frameElem = document.getElementById("someFrame"); 
    console.log("frameElem: " + frameElem); //succeeds

var contentWin = frameElem.contentWindow;
console.log("contentWin : " + contentWin); //undefined

//can't do this since contentWin is undefined: 
//contentWin.postMessage("data", "*");
});

但是,contentWindow属性未定义.为什么会这样,我怎么能绕过它呢？如果我将此扩展代码放在网页中,它本身就可以正常工作.

谢谢!

(原谅蹩脚的jquery/javascript)

我试图使用chrome扩展访问本地var.在console.info(myVar)页面脚本中尝试时,我得到了myVar is not defined

但是,当使用chrome开发人员工具并在调试控制台中执行相同的代码段时,我将获得myVar的完整内容.

尝试访问时的行为相同window.myVar,这只是undefined在通过chrome扩展程序打印时.

通过开发工具和页面脚本使用以下代码段将脚本标记注入到正文中会导致完全相同的行为.

   $("body").append($("<script />", {
      html: "console.info(myVar);"
   }));

在dev工具中执行时会变量打印,但在pagescripts中会出现javascript错误

使用内容脚本,您可以将脚本标记注入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"]
  },

我正在开发一个chrome扩展,我可以在github web编辑器中插入文本.插入的文本应该在插入符号位置,我无法弄清楚如何获取它.

github编辑器是一个ace编辑器,它有以下HTML代码:

<div class="commit-create">
<textarea id="blob_contents"
      class="file-editor-textarea js-blob-contents js-code-textarea"
      rows="35" name="value"
      data-filename="README.md"
      data-language="Markdown"
      data-ace-mode="markdown"
      data-allow-unchanged=""
      data-test-id="blob-file-editor"
      placeholder="Enter file contents here"
      spellcheck="false"
      autofocus>
Line 1
Line 2
Line 3
Line 4
</textarea>
</div>

在我的manifest.json中,我包含了ace.js(从这里获得,我希望它是正确的.js文件)

...    
"content_scripts": 
      [{
        "matches": ["*://*.github.com/*/edit/*"],
        "js":      ["ace.js", "content.js"]
      }],
...

这是用户提供的javascript代码:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) 
{
    ...
    var editor = document.querySelector(".ace_editor").env.editor;
    var cursor = editor.selection.getCursor() // returns object like {row:1 , column: 4}
    editor.insert("text") // insert string at cursor
    ...
}

我收到这个错误

Error in event …