如何在Safari中进行扩展安装后访问DOM

时间:2013-01-09 15:37:33

标签: javascript dom safari safari-extension

完成Safari扩展程序的安装后,是否可以访问DOM? 我有兴趣访问安装此扩展程序的页面的HTML。

1 个答案:

答案 0 :(得分:4)

您可以通过注入JS脚本来实现此目的。注入的脚本可以访问它们注入的网页的DOM。注入的脚本具有与从网页主机执行的脚本相同的访问权限。

您可以找到更多信息here

从注入的脚本调用函数

  1. 列表项
  2. 使用Extension Builder创建扩展文件夹。复制
  3. 列入文本编辑器并保存为Injected.js和Global.html。
  4. 将Injected.js和Global.html拖到您的扩展程序文件夹中。点击
  5. 在Extension Builder中扩展全局页面并选择Global.html。
  6. 单击“结束脚本”中的“新建脚本”,然后选择“Injected.js”。设置
  7. 扩展网站访问级别为全部。单击“安装”。
  8. 代码 Injected.js

    var initialVal=1;
    var calculatedVal=0 ;
    
    function doBigCalc(theData) {
        safari.self.tab.dispatchMessage("calcThis",theData);
    }
    
    function getAnswer(theMessageEvent) {
        if (theMessageEvent.name === "theAnswer") {
            calculatedVal=theMessageEvent.message;
            console.log(calculatedVal);
        }
    }
    safari.self.addEventListener("message", getAnswer, false);
    
    doBigCalc(initialVal);
    

    代码 Global.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>global HTML page</title>
    <script type="text/javascript">
    
    function bigCalc(startVal, event) {
        // imagine hundreds of lines of code here...
        var endVal = startVal + 2;
        // return to sender
        event.target.page.dispatchMessage("theAnswer", endVal);
    }
    
    function respondToMessage(theMessageEvent) {
        if(theMessageEvent.name === "calcThis") {
            var startVal=theMessageEvent.message;
            bigCalc(startVal, theMessageEvent);
        }
    }
    
        safari.application.addEventListener("message",respondToMessage,false);
    </script>
    </head>
    <body>
    </body>
    </html>