Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 1

Add element to website/tab from Safari extension

I am trying to create an extension for Safari that will add an element to the page/tab that I am currently on. In the example below I'd like to add the Send button to the page.

The issue for me is that the new element (button) will be added to the extensions html.

(Sorry the bad format of code below, copy pasted with my phone)

Html:
<HTML>
<HEAD>
&lt;script type="text/javascript">

function sendMessage() {
document.getElementById("textField").innerHTML="Sending message...";
safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("hey", "there");
}

function respondToMessage(messageEvent) {
if(messageEvent.name === "gotIt")
document.getElementById("textField").innerHTML=messageEvent.message;
}

safari.self.browserWindow.addEventListener("message",respondToMessage,false);

&lt;/script&gt;

</HEAD>
<BODY> Message Sender Bar &nbsp;&nbsp;
<INPUT type="button" value="Send" onclick="sendMessage()" />
<SPAN id="textField">...waiting... </SPAN>



Js:
var theBody = document.body;
var element = document.createElement("p");
element.id = "status";
element.style.cssText = "float:right; color:red";
element.textContent = "Waiting...";
theBody.insertBefore(element, theBody.firstChild);

function replyToMessage(aMessageEvent) {
if (aMessageEvent.name === "hey") {
document.getElementById("status").textContent="Message received.";
safari.self.tab.dispatchMessage("gotIt","Message acknowledged.");
}
}
safari.self.addEventListener("message", replyToMessage, false);</BODY></HTML>