How can I automatically add a specific word that I've highlighted within a <text area> situated within an iframe?

This chrome plugin automatically inserts a designated word into the content of an iframe.

Specifically designed for Chrome users.

<html>
    <iframe id="iframe" frameborder="0"  src="http://www.maozakor.co.il/demo/default.aspx">
    </iframe>
    
    <img id="photo" src="https://i.imgur.com/q91Y1ly.png" style="max-width: 100%; min-height: 175px;">

    <style>
    body {
        overflow:hidden;
    }

    #iframe {
        position: absolute;
        overflow:hidden;
        height: 100%;
        width: 100%;
        top: -70px;
    }
          
    #photo {position: relative;
        top: 80px;
        left: 800px;
        z-index: 21003005 ;
    }
    </style>
</html>

javascripthtmlcss

Answer №1

If you have the ability to edit both the code within an iframe and outside of it, you can achieve this by setting up a message listener within the iframe to detect specific words sent from external sources and then insert them into the document.

For more information on using Window.postMessage(), check out the link provided here.

I have successfully implemented this technique in regular websites for cross-domain communication, although I have not tested it with chrome-plugins specifically.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs. h ...

css

Choose links that do not start with a particular pattern

I've been playing around with CSS and I've learned how to select links that start with a certain pattern, like a[href^="tutorials_"] { text-color: red; } But now I'm curious if there's a way to select links that don't start with ...

css

Choose a select few checkboxes and then disable the remaining checkboxes using Vue and Laravel

I'm currently working on a project using Laravel 10 and Vue3. In the form, users are allowed to select only 3 checkboxes. Once they have selected 3 checkboxes, all remaining checkboxes should be disabled. I attempted to implement this functionality a ...

javascriptphplaravelvue.js

What is the best approach to modify the model value when a controller function is triggered?

This is the controller: onSelectRow : function(id){ setTimeout(function () {$scope.getSelectedRow(); }, 0); },}; $scope.getSelectedRow = function(){ var grid = $("#patientgrid"); var rowKey = grid.jqGrid('getGridPara ...

javascriptjqueryangularjsjqgrid

Is the positioning of 'clear:both' influenced by external floated elements?

I have 2 divs. One is styled with float:left and has a width of 100px, making it red. The other div is green and has a margin-left:101px, but is not floated. Within the green div, I inserted another div with two floated elements: The outcome is as follo ...

htmlcss

The React.js project I created is showcased on GitHub pages and has a sleek black design

After developing a project using React.js and deploying it on github pages, everything was functioning smoothly. However, I encountered an issue where the screen turned black after logging in and out multiple times. Are there any suggestions on how to reso ...

javascriptreactjsjsongithubgithub-pages

Tips for implementing version control for css, js, and jsp files

I've created a single-page web application with multiple views, utilizing ng-if for rendering. These views lack headers or body sections and consist only of HTML code. Each view is managed by a separate controller, with many click functionalities han ...

javahtmlangularjsspring-mvcjsp

Generate a graph showcasing the frequency of character occurrences within a specific column of a .csv file

I'm currently working on creating a graph using d3.js What I need to accomplish is reading the some_column column in a .csv file and counting the occurrences of | to plot them accordingly on the y-axis. The line should be plotted based on the number ...

javascriptd3.js

Skip the loading screen and directly retrieve meshes from the GWT server

I have a unique challenge with my animated models, each ranging from 5Mb to 8Mb in size. Downloading them individually can be time-consuming, especially when I need them on demand rather than preloading them in libGdx. While I am experienced with both GWT ...

htmllibgdxgwt-rpc

Is there a way to implement absolute imports in both Storybook and Next.js?

Within my .storybook/main.js file, I've included the following webpack configuration: webpackFinal: async (config) => { config.resolve.modules = [ ...(config.resolve.modules || []), path.resolve(__dirname), ]; return ...

javascriptnext.jsstorybook

Utilize Vue's prop system to pass objects between components

Can you help with passing objects as props in Vue? It seems like a simple task, but I'm having some trouble. In my .vue file, I have the following code: <template> <div id="scatter"></div> </template> <script&g ...

javascriptvue.js

ReactJS Chatkit has not been initialized

I made some progress on a tutorial for creating an Instant Messenger application using React and Chatkit. The tutorial can be found in the link below: https://www.youtube.com/watch?v=6vcIW0CO07k However, I hit a roadblock around the 19-minute mark. In t ...

javascriptreactjsreact-routerchatkit

Why does everything seem to move in sync with the table's scrolling?

I recently had an issue resolved that fixed most of my concerns: I needed to make three separate edits, and now when I reintroduce the other two edits, they are included within the table section and scroll along with the table instead of being stuck beneat ...

javascripthtmlcss

How to keep the Bootstrap column in place while making it fixed

I'm struggling to make the second column (yellow part) stay fixed in position. I've tried using CSS position:fixed, but the column keeps shifting to the left. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/cs ...

csstwitter-bootstrapbootstrap-4

Is it time to refresh the sibling element when it's selected, or is there

I have recently started working with react and TypeScript, and I am facing some challenges. My current task involves modifying the functionality to display subscriptions and transactions on separate pages instead of together on the same page. I want to sh ...

javascriptreactjstypescript

Retrieving HTML content from Wikipedia's API using JavaScript

I am encountering an issue where every time I attempt to log data to my console, an error occurs. Could someone kindly point out what may be the problem with the code? My objective is to actually showcase the html content on a webpage. Below is the code ...

javascript

Having trouble resolving all parameters for AuthService in Angular

Launching my angular app has hit a roadblock with this perplexing error. Despite attempts to troubleshoot by removing the auth service provider and constructor reference from my component, the issue persists. As a novice in angular, I'm struggling to ...

javascriptangulartypescript

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

javascripthtmlmath

Issue #98123 encountered during execution of `npm run develop` command, related to WEBPACK

I want to start a brand new Gatsby site following the instructions provided on . Here's what I did: npm init gatsby # see note below cd my-gatsby-site npm run develop Note: I didn't make any changes to the configuration, so I'm using JavaS ...

javascriptreactjswebpackgatsby

Is it possible to enhance an external class with a non-static method using prototypes?

Is it possible to use prototypes to add a function for a class instance? allowing me to access this or __proto__ keyword inside my method, like so: class PersonClass { name: string; constructor(name: string) { this.name = name; } sayHello() ...

javascripttypescriptprototype